Flex相关

父容器的属性

flex-direction (主轴/项目排列方向)

row(默认，水平，起点在左端) | row-reverse | column | column-reverse

flex-wrap (是否换行)

nowrap(默认不换行) | wrap(换行，第一行在上方) | wrap-reverse(换行，第一行在下方)

flex-flow (flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap)

<flex-deirection> || <flex-wrap>

justify-content (主轴的对齐方式)

flex-start(默认 左对齐) | flex-end | center | space-between (两端对齐，项目之间的间隔都相等。) | space-around (每个项目两侧的间隔相等)

align-items (定义项目在交叉轴上如何对齐)

flex-start (交叉轴的起点对齐) | flex-end(交叉轴的终点对齐) | center(交叉轴的中点对齐) | baseline(项目的第一行文字的基线对齐) | stretch(默认值 如果项目未设置高度或设为auto，将占满整个容器的高度)

子项目的属性

order (属性定义项目的排列序列。数值越小排列越靠前，默认为0)

flex-grow (项目的放大比例，默认为0)

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink (项目的缩小比列，默认为1)

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小

• 计算方式：
  (项目n宽度*n的缩小比例/(项目1宽度*1的缩小比例)+...+(项目n宽度*n的缩小比例))*超出的宽度

  100+400且flex-shrink都为1的子项目 父级为400 ，子项目超出100
  100的子项目应该缩小的宽度：100*1/（100*1+400*1）=0.2 0.2*100 = 20
  400的子项目应该缩小的宽度：400*1/（100*1+400*1）=0.8 0.8*100 = 80

flex-basis (项目的固定空间 与width类似)

length | auto(默认) | 百分比（主轴长度）

• 和flex-grow、flex-shrink一起使用的时候的计算方式

父容器主轴的长/宽 设置为`900`

所有元素都设置为` flex:1 `
其中`元素1`设置` flex-basis: 30% ` 
`元素2`设置`flex-grow: 2`

1. 先看`flex-basis`，获取到应有的长度
// 只有元素1设置了宽度
width1 = 900*0.3 = 270
    

2. 因为设置了`flex-grow`，所有元素平分剩余的宽度
// 剩余 630
// 总份数： 1+2+1=4

// 元素1：占1份 
    width1 = 630*(1/4) + 270 = 427.5
// 元素2：占2份 
    width2 = 630*(2/4) = 315
// 元素3：占1份 
    width3 = 630*(1/4) = 157.5

flex (属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 )

none | [ <flex-grow> <flex-shrink>?|| <flex-basis> ]

align-self (属性允许单个项目有与其他项目不一样的对齐方式 默认为auto)

auto | flex-start | flex-end | center | baseline | stretch

可视化