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

@

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

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;

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