还在为网页排版抓狂？别担心，CSS的 flex 布局来了，让你轻松玩转各种页面布局，实现网页设计自由！

什么是Flex 布局？

Flex 布局，也称为弹性布局，是 CSS 中的一种强大布局方式，它能够让你的网页元素像弹簧一样，灵活地适应各种屏幕尺寸和设备方向。

想象一下:

• 你需要将几个盒子水平排列，并且它们能够自动调整大小以适应不同的屏幕宽度？
• 你需要将一个盒子垂直居中，并且无论其内容如何变化，都能保持居中

这些看似复杂的需求，使用Flex布局就能轻松解决！

Flex 布局魔法口诀：容器和项目

• 容器 (Flex Container): 需要使用Flex布局的父元素。

   .container {
       display: flex; /* 将 .container 元素设置为 Flex 容器 */
   }

• 项目 (Flex Item): Flex容器中的子元素。

   <div class="container">
       <div class="item">项目 1</div>
       <div class="item">项目 2</div>
       <div class="item">项目 3</div>
   </div>

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; 设置项目的排列顺序，数值越小，排列越靠前。

实战演练：三栏式布局

<div class="container">
  <div class="sidebar">侧边栏</div>
  <div class="content">主要内容</div>
  <div class="aside">侧边栏</div>
</div>

.container {
  display: flex;
}

.sidebar {
  width: 200px;
}

.content {
  flex: 1; /* 自动填充剩余空间 */
}

.aside {
  width: 200px;
}

总结

Flex 布局是网页排版的神器，掌握它，你就能轻松应对各种布局需求，让你的网页设计更加灵活、美观！