flex布局记录

flex属性

flex属性是flex-grow、flex-shrink和flex-basis的缩写，其均是作用在项目上，默认值为0 1 auto。后两个属性可选；
注意： 该属性有两个默认的值：auto（1 1 auto）和 none（0 0 auto）。建议优先使用auto默认值，浏览器会推算相关值。

• flex-grow: 定义项目的放大比例，默认为0；也就是当在主轴方向上（假设项目的排列是沿主轴方向排列）存在剩余空间时，分配到每个项目上的剩余空间
  场景：如果所有项目的flex-grow都为1，那么他们将等分剩余空间；如果其中一个项目的flex-grow为2，其余的项目为1，那么它占用剩余空间是其他项目的2倍；
• flex-shrink: 定义项目的收缩比例，默认为1，即如果空间不足，该项目将缩小；如果为0，则不缩小；
  场景：如果所有项目的flex-shrink均为1，当空间不足时，将等比例缩小；如果其中有一个项目的flex-shrink为0，其余均为1，空间不足时，前者不缩小
• flex-basis：表示在分配主轴多余空间时，项目占据的主轴空间，浏览器根据这个特性，计算主轴是否存在多余空间。默认值为auto，即项目的本来大小；它可以设为跟width或height属性一样的值，即项目的固定大小

左右在flex容器上的属性

• display: flex
  表示该容器使用flex布局
• flex-direction属性
  表示创建主轴的方向（即项目的排列方向）

div{
    flex-direction: row | row-reverse | column | column-reverse;
}

排列方向如下所示：

image.png

• flex-wrap属性
  默认情况下，项目都排在一条线（轴线）上，该项目定义，如果一行排不下，项目如何进行换行

div{
    flex-wrap: nowrap(默认) | wrap | wrap-reverse;
}

注意： wrap换行是第一行在上方，wrap-reverse是第一行在下方（相反的方向）

• flex-flow属性
  flex-flow属性是flex-direction和flew-wrap的简写形式，
  默认是row nowrap；

div{
    flex-flow:  | 

• justify-content属性
  定义项目在主轴上的对齐方式，假设flex-direction:row，也就是主轴方向是行，那个该属性定义的就是项目在一行上的对齐方式；

div{
    justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;
}

主要需要注意的属性有：space-between | space-around

• space-between: 两端对齐，项目之间的间隔相等

• space-around: 每个项目两侧的距离相等。所以项目之间的间隔是两侧项目与边框之间间隔的一倍，可以理解为给项目添加了margin-left和margin-right属性，这样每个项目之间的间距就增大了

• align-items属性
  定义项目在交叉轴（假设flex-direction:row横向排列，交叉轴就是竖轴）上的对齐方式

div{
    align-items: flex-start | flex-end | center | stretch | baseline;