掌握flex布局

flex的相关属性

应用在flex container上的CSS属性

• flex布局（Flexible布局，弹性布局）
• display:flex/flexibe开启flex布局；flex——flex container以block-level（块级元素）存在；inline-flex——flex container以block-level（行内元素）形式存在
• flex conntainer的直接子元素叫做flex items

1. flex-wrap 决定了flex container是单行还是多行
   nowrap(默认）:单行
   wrap：多行
   wrap-reserve:多行（对比wrap，cross start 与 cross end 相反）

2. flex-direction 绝对主轴方向
   row:主轴从左到右
   row-reverse:主轴从右到左
   column:主轴从上到下
   columnn-reserve：主轴从下到上

3. flex-flow
   flex-flow：缩写属性->flex-direction||flex-wrap 顺序任意

4. justify-content 决定了flex items在main axis主轴上的对齐方式
   flex-stat(默认值）:与main start对齐
   flex-end：与main-end对齐
   center：居中对齐
   space-between：flex items之间的距离相等；与main start\main end两端对齐
   space-evenly：flex items之间的距离相等；flex items与main start、main end之间的距离等于flex items之间的距离
   space-around：flex items 之间的距离相等；flex items与main start、main end之间的距离等于flex items之间的距离的一半

5. align-items 决定了flex items 在cross axis交叉轴上的对齐方式
   normal：在弹性布局总，效果和stretch一样
   stretch：当flex items 在交叉轴方向的size为auto时，会自动拉伸至填充flex container
   flex-start：与cross start对齐
   flex-end：与cross end对齐
   center：居中对齐
   baseline：与基准线对齐

6. align-content 决定了flex items 在cross axis交叉轴上的对齐方式，用法类似于justify-content类似（上面的第6点）单行不起效
   stretch(默认值）:与align-items的stretch类似
   flex-stat(默认值）:与cross start对齐
   flex-end：与cross end对齐
   center：居中对齐
   space-between：flex items之间的距离相等；与cross start/cross end两端对齐
   space-evenly：flex items之间的距离相等；flex items与cross start、cross end之间的距离等于flex items之间的距离
   space-around：flex items 之间的距离相等；flex items与cross start、cross end之间的距离等于flex items之间的距离的一半

应用在flex items上的CSS属性

7. flex
   

8. flex-grow决定了flex items如何扩展
   可以设置任意非负数字（正小数、正整数、0）
   当flex container在main axis方向上有剩余时，该属性才会有效
   

9. flex-basis
   

10. flex-shrink
    

11. order 决定了flex items的排序布局
    可以设置任意整数（正整数、负整数、0），值越小就排在越前面
    默认值是0

12. align-self 通过它覆盖flex container 的align-items的设置
    auto(默认值)：遵从flex container的align-items设置
    stretch、flex-start、flex-end、center、baseline，效果跟align items 一致