还在为网页排版抓狂？别担心，CSS的 flex 布局来了，让你轻松玩转各种页面布局，实现网页设计自由！
什么是Flex 布局？
Flex 布局，也称为弹性布局，是 CSS 中的一种强大布局方式，它能够让你的网页元素像弹簧一样，灵活地适应各种屏幕尺寸和设备方向。
想象一下:
- 你需要将几个盒子水平排列，并且它们能够自动调整大小以适应不同的屏幕宽度？
- 你需要将一个盒子垂直居中，并且无论其内容如何变化，都能保持居中
这些看似复杂的需求，使用Flex布局就能轻松解决！
Flex 布局魔法口诀：容器和项目
- 容器 (Flex Container): 需要使用Flex布局的父元素。
.container {
display: flex; /* 将 .container 元素设置为 Flex 容器 */
}
- 项目 (Flex Item): Flex容器中的子元素。
项目 1
项目 2
项目 3
Flex 布局魔法棒：属性详解
1. 方向控制：想横着排还是竖着排？
- flex-direction: row; 水平排列，默认值。
- flex-direction: column; 垂直排列。
2. 主轴对齐：让项目乖乖听话！
- justify-content: flex-start; 项目在主轴起点对齐。
- justify-content: flex-end; 项目在主轴终点对齐。
- justify-content: center; 项目在主轴居中对齐。
- justify-content: space-between; 项目两端对齐，项目之间间隔相等。
- justify-content: space-around; 项目周围间隔相等。
3. 交叉轴对齐：垂直方向也要美美哒！
- align-items: flex-start; 项目在交叉轴起点对齐。
- align-items: flex-end; 项目在交叉轴终点对齐。
- align-items: center; 项目在交叉轴居中对齐。
- align-items: stretch; 项目在交叉轴方向拉伸。
4. 项目排序：想放哪里就放哪里！
- order: 1; 设置项目的排列顺序，数值越小，排列越靠前。
实战演练：三栏式布局
主要内容
侧边栏
.container {
display: flex;
}
.sidebar {
width: 200px;
}
.content {
flex: 1; /* 自动填充剩余空间 */
}
.aside {
width: 200px;
}
总结
Flex 布局是网页排版的神器，掌握它，你就能轻松应对各种布局需求，让你的网页设计更加灵活、美观！