布局神器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

多行多列布局

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 种方法