flex布局参考
弹性布局
主要在移动端使用，目前pc端也在使用
??开启了flex布局的元素叫 flex container
??flex container 里面的直接子元素叫做 flex items
??设置display属性为flex或者inline-flex可以成为 flex container
??flex：flex container 以block-level的形式存在
??inline-flex：flex container 以inline-level的形式存在
flex布局模型
?横方向：叫主轴 main axis
?竖方向：叫交叉轴 cross axis
应用在flex container上的css属性
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
flex-direction
flex items 默认是沿着main axis（主轴）从main start 开始向main end的方向排布
决定了main axis的方向
justify-content
决定了flex items在main axis上的对其方式
align-items
align-items决定了flex items在cross axis上的对齐方式
flex-wrap
flex-wrap决定了flex container 是单行还是多行
默认情况下，所有的flex items都会在同一行显示
align-content
align-content决定了多行flex items在cross axis上的对齐方式，用法uijustify-content类似
应用在flex items 上的css属性
- flex
- flex-grow
- flex-basis
- flex-shrink
- order
- align-self
order
order决定了flex items的排布顺序
align-self
flex items可以通过align-self覆盖flex container设置的align-items
flex-grow
flex-grow决定了flex items如何扩展
flex-shrink
flex-shrink决定了flex items如何收缩
flex-basis
flex-basis用来设置flex items在main axis方向上的 base size