Flex弹性布局

优点：用来给盒模型提供灵活性，任何容器都可以使用。

• 标准布局：宽不写默认撑满，高是由内容撑
• flex布局：高不写默认撑满，宽是由内容撑

父元素加:

.box{
    display:flex;
    //内联块级弹性布局（同行显示）
    display:inline-flex;
}

flex容器中子元素称为容量项目

• 水平方向为主轴，项目默认沿主轴排列

• 垂直方向为交叉轴

  决定主轴方向（加给父元素） .box{ flex-direction:row/row-reverse/column/column-reverse; // 从左到右/从右到左/从上到下/从下到上 }

  主轴对齐方式（加给父元素） .box{ justify-content:flex-start/flex-end/center/space-between/space-around; // 项目左对齐排列/右对齐排列/居中对齐排列/分散排列两端无空白/分散排列两端有空白 }

交叉轴对齐方式（加给父元素）
.box{
    align-items:flex-start/flex-end/center/baseline/stretch
    // 上对齐/下对齐/中心对齐/基线对齐/占满容器
}

折行显示（加给父元素）
.box{
    flex-wrap:nowrap/wrap/wrap-reverse;
    // 不换行（宽压缩）/换行（上下会有空白）/换行且反转
}多跟轴线对齐方式 (折行显示造成 加给父元素）
.box{
    align-content:flex-start/flex-end/center/space-between/space-around;    // 交叉轴起点对齐/交叉轴终点对齐/交叉轴中点对齐/交叉轴分散对齐上下无空白/交叉轴分散对齐上下有空白}

单个不同对齐方式 （加给子元素）
.item{
    align-self:auto/flex-start/flex-end/center/baseline/stretch
    // 自动/上对齐/下对齐/中心对齐/基线对齐/占满容器
}

项目排序（加给子元素）
.item{
    order:<num>;
    // 数值越小越靠前，默认为0
}

项目放大比例（加给子元素）
.item{
    flex-grow:<num>;
    // 剩余空间分配，默认为0不分配，数值越大，分的越多
}
项目缩小比例（加给子元素）
.item{
    flex-shrink:<num>;
    // 默认为1，空间不足会缩小，数值越大，缩小越多，0不缩小
}
项目占主轴空间（加给子元素）
.item{
    flex-basis:300px/auto;
}
以上三项可以简写为：
.item{
    flex:0 1 auto/auto(1 1 auto) 或1/none(0 0 auto) 或0
    flex:1 // 子元素的width会变（被分配默认空白当作padding）
}

• flex:1  被分配默认空白当作padding
• justify-content: space-around 被分配默认空白当作margin