布局神器flex

flex

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

用法

设置在父元素上的属性

1. flex-direction ---决定项目的排列方向，row | row-reverse | column | column-reverse
2. flex-wrap ---决定项目是否换行，nowrap | wrap | wrap-revers
3. flex-flow ---<flex-direction> || <flex-wrap>
4. justify-content ---决定项目排列方向上的对齐方式，
   1) flex-start
   2) flex-end
   3) center
   4) space-between 两端对齐
   5) space-around 子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。
5. align-items ---决定垂直轴上的对齐方式，flex-start | flex-end | center | baseline | stretch

有坑，记得父元素高度

1. align-content ---决定多列或多行垂直轴上的对齐方式，flex-start | flex-end | center | space-between | space-around | stretch

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

设置在子元素上的属性

1. order ---决定项目的排列顺序，数值越小，排列越靠前，默认为0，<integer>
2. align-self ---决定单个项目与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，auto | flex-start | flex-end | center | baseline | stretch
3. flex ---none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

4. flex-grow ---决定项目的放大比例，默认为0，<number>

   按比例分配剩余空间

5. flex-shrink ---决定项目的缩小比例，默认为1，<number>

   当空间不足时，按比例缩放

6. flex-basis ---决定在分配多余空间之前，项目占据的空间，默认值为auto，<length> | auto

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

1.属性定义了在分配多余空间之前，项目占据的主轴空间。默认值为auto，即为项目本来大小；
2.优先级比width高;
3.元素存在min-width/max-width限制

多行多列布局

flex+width%

.box {
   display: flex;
   flex-wrap: wrap;
 }
.item {
    width: 20%;
 }

多行布局最后一行左对齐

1.添加几个与元素等宽的元素

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
  </div>

2.after

.box:after {
    content: "";
    flex: auto;
 }

.box:after {
    content: "";
    flex: 0 1 50%;
 }

参考链接：
一劳永逸的搞定 flex 布局
写给自己看的display: flex布局教程
让CSS flex布局最后一行列表左对齐的N种方法