Flexbox简介

概念

• Main Axis：主轴
• Cross Axis：侧轴
  这两个轴始终是相互垂直的，主轴、侧轴并不是固定水平方向或垂直方向。

在 Flexbox 模型中，有三个核心概念：

• flex 项（也称 flex 子元素），需要布局的元素
• flex 容器，其包含 flex 项
• 排列方向（direction），这决定了 flex 项的布局方向（即主轴）

Flexbox原理

Flexbox原理

flex-direction（流动布局的主轴方向）

• column：列方向，从上到下排列
• row：行方向，从左到右排列
• column-reverse：column排列反方向
• row-reverse：行反方向

flex-direction的值可以决定Flex容器中主轴和侧轴的方向。当flex-direction的值为column时，垂直方向的轴就变成了主轴，与其垂直的就是侧轴。

justify-content（主轴方向内容对齐方式）

定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。

• flex-srart（默认）：与主轴起始方向对齐。
• flex-end：向主轴终点方向对齐。
• center：向主轴中点方向对齐。
• space-between：起始位置向主轴起始方向对齐，终点位置向主轴终点方向对齐，其余位置向主轴中点方向对齐。
• space-around：与space-between类似，只是起始位置和终点位置保留一半空白。

justify-content

align-items（侧轴方向内容对齐方式）

定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。与justify-content类似，只是这里的参考方向为侧轴。

• stretch（默认）：在侧轴方向拉伸每个项目，使每个项目保持相同的起始位置和终点位置。
• flex-srart：与侧轴起始方向对齐。
• flex-end：向侧轴终点方向对齐。
• center：向侧轴中点方向对齐。
• baseline：在侧轴上保持基线对齐，以第一个项目的基线为准。

align-items

通过设置 justify-content:center和align-items:center，可以使 flex 项水平和垂直放置在 flex 容器的中心。

align-content（多个主轴沿侧轴方向的内容堆栈对齐方式）

• flex-start：多个主轴沿侧轴起始方向对齐。
• flex-end：多个主轴沿侧轴终点方向对齐。
• center：多个主轴沿侧轴中点方向对齐。
• space-between：第一个主轴沿主轴起始方向对齐，末尾主轴沿主轴终点方向对齐，其他主轴均匀分布对齐。
• space-around：与space-between类似，只是侧轴起始位置和侧轴终点位置保留一半空白。
• stretch（默认）：伸缩多个主轴，保持侧轴方向统一距离。

align-content