弹性布局。display: flex,display: inline-flex 设置元素成为flex容器.

两者区别：
display: flex： 容器的行为类似block，独占一行，可设置宽高
display: inline-flex：容器的行为类似inline-block，前后不产生换行，可设置宽高

主轴：默认水平
交叉轴： 默认垂直
flex-direction属性可改变主轴/交叉轴方向

flex 容器熟悉

flex-direction

属性值	描述
row	默认值
row-reverse
column
column-reverse

flex-wrap

属性值	描述
nowrap	默认值
wrap
rap-reverse

flex-flow

flex-direction 和flex-wrap的简写
flex-flow: flex-direction | flex-wrap

justify-content

属性值	描述
flex-start	默认值
flex-end
center
space-between
space-around

align-items

属性值	描述
flex-start
flex-end
center
baseline
stretch

align-content

属性值	描述
flex-start
flex-end
center
space-between
space-around
stretch

flex 项目属性

order

属性值	描述
Number	数值越小位置越靠前，默认值0

flex-grow

当容器空间有剩余时，项目按比例占据容器的剩余空间

属性值	描述
Number	默认值0.

flex-shrink

当容器不足时，项目按比例缩小空间

属性值	描述
Number	默认值1.

flex-basis

项目占据主轴的空间。浏览器根据这个属性，计算主轴是否有多余空间

属性值	描述
auto	默认值，项目本身的大小
length

flex

flex-grow、flex-shrink、flex-basis的简写
flex: flex-grow | flex-shrink | flex-basis
默认值：flex: 0 1 auto
快捷值：auto==>1 1 auto，none==>0 0 auto

align-self

属性值	描述
auto	默认值，继承容器align-items的值
flex-start
flex-end
center
baseline
stretch

常见缩写的意义

常见实例

水平垂直居中

  <div style="display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; border: 1px solid;">
      <div style="width: 100px; height: 100px; border: 1px solid;"></div>
  </div>

九宫格

固定宽高

<div class="container">
    <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="item"></div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 300px;
    height: 300px;
    border: 1px solid;
}
.item {
    /* width: 100px; */
    width: calc(100% / 3);
    height: 100px;
    border: 1px solid;
    flex-shrink: 0;
    box-sizing: border-box;
}