Flex布局(CSS)

Flex布局

Flex是Flexible Box的缩写，名为“弹性布局”。

Flex布局是目前前端使用范围最广的一种布局方式(这个现在没人反对吧~)。

兼容性：Can I use flex

.box {
  display: flex;
}

上面这段代码就可以轻松的将box元素指定为Flex布局。

我们将采用Flex布局的元素，成为Flex容器，简称“容器”，它的所有的子元素称为Flex项目，简称“项目”。

容器有两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴开始的位置叫做main start，主轴结束的位置叫做main end；交叉轴开始的位置叫做cross start，交叉轴结束的位置叫做cross end。当个项目占据主轴的空间叫做main size，占据交叉轴的空间叫做cross size。

容器主要有6个属性，分别是：

• flex-direction： 定义主轴方向 MDN
• flex-wrap： 超出换行表现形式 MDN
• flex-flow： flex-direction和flex-wrap的简写 MDN
• justify-content MDN
• align-items MDN
• aligin-content MDN

项目也主要有6个属性，分别为：

• order MDN
• flex-grow MDN
• flex-shrink MDN
• flex-basis MDN
• flex-basic MDN
• flex MDN
• align-self MDN

flex-direction 定义主轴方向

• row：default 主轴被定义为与文字方向相同，主轴起点和终点与内容方向相同。
• row-reverse：与row表现一致，但是主轴起点和终点方向相反。
• column：主轴被定义为与块轴(block-axis)相同，主轴起点和终点和书写方向相同。
• column-reverse：与column表现一致，但是主轴起点和终点方向相反。

flex-wrap 超出换行变现形式

• nowrap：default flex的元素放置在一行，可能会导致flex容器溢出。
• wrap：flex元素超出会被打断到多行。
• wrap-reverse：flex元素超出会被打断到多行，但是交叉轴方向会相反。

flex-flow flex-direction和flex-wrap的简写

justify-content 主轴方向元素的排列状态

• flex-start：default 左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，项目之间的间隔都相等
• space-around：每个项目两侧的间隔相等