CSS：弹性布局（display:flex）

道友请了~ 最近小道在修练主修功法《嘉蛙》之余，偶然从一名散修手中得到了一本《CSS秘籍》，刚好近期有自己做微信小程序的打算，这不是瞌睡了给递枕头么。欣喜若狂，翻开第一章，拜读之后受益匪浅。韩老魔说过：好记性不如烂笔头。（韩老魔：我没说过！）遂誊抄一份，分享给各位道友。

@

目录

• 容器的属性
  • justify-content：控制主轴上的子项对齐方式
  • align-items：控制交叉轴上的子项对齐方式。
  • flex-direction：定义主轴的方向，即子元素的主要排列方向
  • flex-wrap：是否换行及换行的方向
  • align-content：多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
  • flex-flow：flex-direction 和 flex-wrap 的简写形式

弹性布局的设计理念是让容器能够根据空间的变化自动调整其子元素的大小和位置，从而在不同屏幕尺寸和设备上创建响应式和适应性强的界面。

Flex 布局的核心概念包括：

1. 容器 (Flex Container): 当一个元素的 display 属性被设置为 flex 或 inline-flex 时，这个元素就变成了一个 Flex 容器。这将改变其默认的布局行为，使其遵循 Flex 布局规则。
2. 子项 (Flex Items): Flex 容器的所有直接子元素都自动成为 Flex 子项，它们将根据容器的 Flex 属性进行布局。
3. 主轴 (Main Axis): 这是 Flex 容器中默认的方向，可以是水平或垂直，取决于 flex-direction 属性的值。Flex 子项沿主轴排列。
4. 交叉轴 (Cross Axis): 这是与主轴垂直的方向。当 Flex 子项堆叠在主轴上时，交叉轴决定了子项的层叠顺序。

容器的属性

justify-content：控制主轴上的子项对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items：控制交叉轴上的子项对齐方式。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-direction：定义主轴的方向，即子元素的主要排列方向

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap：是否换行及换行的方向

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（默认）：不换行
• wrap：换行，第一行在上方
• wrap-reverse：换行，第一行在下方

align-content：多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴

flex-flow：flex-direction 和 flex-wrap 的简写形式

• 这是 flex-direction 和 flex-wrap 的简写形式，例如 flex-flow: row wrap;

通过组合使用这些属性，你可以创建出复杂而灵活的布局，适应不同的屏幕尺寸和内容需求。