flex布局的一些概念

flex布局的一些概念

简介

本文介绍flex布局中的一些概念，包括各个轴、一些属性（如justify-items）的含义。

正文

使用场景及布局概念

flex布局适用于存在主轴的情况，主轴可以是列或者是行，下图展示了相关概念：

main axis是主轴，主轴的方向可以使用flex-direction属性指定，例如flex-direction: row就是上面这种情况。

通过在设置display: flex可以将一个元素设置为flex容器，flex容器中的每个直接元素都是一个flex item。

相关属性

容器属性

下面的属性是用于容器的。

1. display: flex，把一个元素设置为flex容器
2. flex-direction: row/column，设置容器中item的摆放方向，row是横向摆放，column是纵向
3. justify-content，这个属性可以控制items在main axis上的排布情况。默认情况下，如果flex-direction是row的话，所有的item都是从左到右紧贴着排列，如果是column的话，item是从上到下排列，这个属性有如下取值：
   1. flex-start，从开始排列，这就是默认的沿main axis的排列方式，从main start开始排
   2. flex-end，和flex-start相反，item被堆到容器的main end
   3. space-between，第一个item和最后一个item分别占据main start和main end，其余item在之间均匀排布
   4. space-around，每个item旁都有相同大小的space，两个item之间就有双倍的space
   5. space-evenly，item之间、item和容器start和end之间的space都相同
4. align-items，这个属性用于控制item在cross axis上的排布，也就是垂直与flex容器方向上的排布。有下面一些取值：
   1. flex-start，对齐start，如果flex-direction:row，就是上对齐，如果是flex-direction: column，就是左对齐。
   2. flex-end，和flex-start相反.
   3. center，句中对齐
   4. stretch，拉升item到cross start和cross end
   5. baseline，紧挨着文本下方的那条线就是baseline，按照这条线对齐
5. flex-wrap，这个属性设置item的折行。默认情况下不折行，下面是一些取值：
   1. wrap，折行，以flex-direction:row为例，下同，先排第一行，如果排不下，再排第二行
   2. nowrap，不折行，根据item的比例挤在同一行中
   3. wrap-reverse，折行，但是先排最后一行，排不下再排上面一行，以此类推

item属性

下面的属性用于容器中的item

1. flex-basis，数字，定义各个item的比例
2. flex-shrink，数字，当容器大小小于各个item相加时，item会被缩小，这个属性定义了各个item缩小的比例
3. flex-grow，和flex-shrink类似，不过是扩大
4. align-self，单独调整item的位置，可选的和align-items相同。

---

为了直观，写了一个pen，可以调节各种参数观察flex布局。