flex布局

flex布局/弹性布局/伸缩盒

采用flex布局元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器属性：
flex-dircetion (更改主轴排列方向)
flex-wrap (换行)
flex-flow（flex-direction和flex-wrap属性的缩写）
justify-content（设置主轴对齐方式）
align-items (设置交叉轴的对齐方式)
align-content (设置多行对齐)

弹性元素属性：
order (控制元素排列顺序，值越小越靠前，默认为0
flex-grow（决定项目在有剩余空间的情况下是否放大，默认为0）
flex-shrink（决定项目空间不足时是否缩小，默认是1）
flex-basis（设置弹性元素宽度 basis 优先级比 width 高）
align-self（设置弹性元素自身交叉轴对齐方式）
flex（flex-grow和flex-shrink和flex-basis 的缩写 默认取值 flex：0 1 auto）

水平居中

1. display:flex justify-content:center align-items:center
2. display:grid justify-content:center align-items:center
3. display:flex 子元素margin:auto

容器属性

弹性元素沿主轴方向排列
flex-direction：row(默认) | row-reverse | column | column-reverse 更改主轴排列方向

换行
flex-wrap: nowrap(默认) | wrap | wrap-reverse 默认不换行，如果弹性元素超出父容器的宽度，等比例压缩
flex-flow: row nowrap 默认
是flex-direction和flex-wrap属性的简写

设置主轴对齐方式
justify-content：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly
交叉轴对齐方式
align-items：flex-start | flex-end | center | baseline | stretch(默认)

space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。

space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。

space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。

stretch平铺 ，默认交叉轴属性，前提弹性元素高度不设置/auto。

基线对齐 baseline 文字对齐

设置多行对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认)

space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。

space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器。

弹性元素属性

控制元素排列顺序
order: 默认0, 值越小越靠前

决定项目在有剩余空间的情况下是否放大
flex-grow： 容器在有剩余空间的情况下默认是不会被占据

决定项目在空间不足时是否缩小
flex-shrink 默认是1 等比例压缩
flex-basis 默认auto，设置弹性元素宽度 basis优先级比width高

占满剩余空间
flex: 默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写

交叉轴对齐方式
align-self： auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。