flex布局

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

核心概念： 主轴、交叉轴、伸缩盒容器、伸缩盒元素。

常用规则

容器属性（设置给父元素）：
flex-dircetion：row column row-reverse column-reverse (更改主轴排列方向)
flex-wrap : nowrap wrap (换行)
flex-flow（flex-direction和flex-wrap属性的缩写）
justify-content ： flex-start flex-end center space-around/ evenly/ between（设置主轴对齐方式）
align-items : flex-start flex-end center stretch baseline (设置交叉轴的对齐方式)
align-content : flex-start flex-end center space-around/ evenly/between (设置多行对齐)

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

使用技巧

伸缩盒容器常用于列级布局，与浮动布局类似可以将多个块元素在一行中显示，伸缩盒更简单一些，只需要为容器盒子添加display:flex属性，这个容器盒子就变成了伸缩盒容器，其子元素伸缩盒元素就会沿着主轴来排列，默认主轴是x轴，可以通过flex-direction来改变主轴。

水平居中

1. 给父元素设置display：flex；
   justify-content:center; align-items:center;
2. 给父元素设置display:grid;
   justify-content:center; align-items:center;
3. 给父元素设置display: flex;
   给子元素设置margin:auto
4. 子绝父相：配合属性全部为0，margin : atuo;
5. 子绝父相：top:50%; left:50%; margin-left: -width/2; margin-top:-height/2
6. 给父元素设置border，给子元素设置 margin:width/2
7. 给父元素设置border-box，设置padding：width/2

容器属性

弹性元素沿主轴方向排列
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。