flex基础

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。

开启flex布局：

display: flex;

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

 

flex-direction: 子元素方向，默认为row。 可选值：

row | row-reverse | column | column-reverse;

justify-content：元素在主轴的对齐方式，可选值：

 flex-start | flex-end | center | space-between | space-around;

align-items：元素在交叉轴上的对齐方式，可选值：

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

flex: 数字  表示同级元素在父元素中的宽或者高（看flex-direction)所占的比例。 如A 3, B 2, C 1, 横排， 则宽度分别占3/6 2/6, 1/6。 如果某些元素指定了固定宽度，没有指定flex值，计算的时候将它排除出去。如 A 44px,B 1, C 55px, 则A和C是固定宽度，B占满剩余宽度。