今天正好复习到flex布局，由于flex弹性盒布局在我们前端开发中尤为重要所以拿出来单独总结一下，顺便讲一下常见的几种居中方式
一、flex布局的特点
- flex布局即为弹性布局，可以使元素具有伸缩性，根据父容器的大小，来决定收缩还是扩展。设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
- 来对比一下，有和没有flex布局的区别
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.flexBox {
/* display: flex; */
width: 200px;
height: 200px;
margin: 10px;
background-color: aqua;
}
.item {
height: 100px;
width: 100px;
border: 1px solid black;
background-color: rgb(116, 226, 42);
}
</style>
<div class="flexBox">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
这是没加flex布局时的子元素排列情况↓
.item {
float: left;//添加浮动
height: 100px;
width: 100px;
border: 1px solid black;
background-color: rgb(116, 226, 42);
}
.flexBox {
display: flex;//给父容器添加flex盒子模型
width: 200px;
height: 200px;
margin: 10px;
background-color: aqua;
}
.flexBox {
display: flex;
flex-wrap: wrap;//允许换行排列
width: 200px;
height: 200px;
margin: 10px;
background-color: aqua;
}
二、flex父容器属性
display: flex设置为flex盒子模型，在父容器下设置这个，此时在父容器下的所有元素都具有弹性，也就是可以伸缩了。
flex-direction: row此属性设置flex布局中主轴方向(子元素的排列方向)，默认row即从左到右，还有row-reverse从右到左，column从上到下，column-reverse从下到上,说起flex布局中有2个轴，元素就是依靠这2个轴进行对齐，一个是主轴，也就是子元素的排列方向，默认row即为水平轴。
默认从左到右排序。现在把主轴方向改为row-reverse即为水平从右到左排列↓
现在子元素调了一个头开始排序。接下来使用column试试↓
column-reverse也一样↓
flex-wrap: nowrap这个属性上面也接触过了，也就是设置flex布局中子元素的换行情况，默认nowrap是不换行如果空间够好说，空间不够就要挤压元素了。可选值为：nowrap不换行，wrap可换行，wrap-reverse换行且反转。先试试wrap于nowrap区别↓
wrap-reverse是怎么回事↓
wrap-reverse就是新行的位置变了，变成了上面，一般我们写字，新行都在下面，而这个反转，就把新行写在了上方。
flex-flow: row nowrap这是一个复合属性，也就是把flex-direction和flex-wrap合并在一个属性上。这个属性可以同时设置flex的主轴方向和换行方式。也可以分开单独设置。justify-content: flex-start这是属性设置的是主轴的对齐方式，之前没有设置对齐方式就是一个挨着一个排列，看图最容易明白。
align-items:stretch此属性设置flex布局下单行时的侧轴对齐情况。
align-content:stretch设置flex布局中多行时的侧轴对齐情况，把每一行看作一个元素进行对齐，与justify-content类似。
三、flex子元素属性
flex:0 1 auto这是一个复合属性，可以同时设置flex-grow、flex-shrink、flex-basis，分别为子元素扩展比例、收缩比例、基础比例。接下来依次讲解flex-grow:0设置子元素的扩展比例默认0，不允许负值。说白了就是当设置了扩展比例之后，如果父元素还有剩余空间，则这部分空间由所有设置扩展比例的子元素按比例分配。
flew-shrink:1设置子元素的收缩比例，默认为1，不允许负。现在知道为什么，空间不足的时候子元素会默认收缩吗，因为有默认收缩比例，而扩展比例默认为0即不分配额外空间。
flex-basis:auto设置元素的基准伸缩比例，默认auto情况下，元素的宽度由width或者内容决定。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。
align-self:auto设置子元素自身的侧轴对齐方式，此属性可以单独设置每个子元素在侧轴上的对齐。
order:0设置每个元素的排列顺序，数值越小排在越前面，也就是按照给定优先级排列元素。
四、常用的几种居中方式
margin:0 auto+text-align:center这个设置前提是父元素要有宽高，只设置元素的水平居中以及此元素的子元素水平居中。line-height:子元素高度
-
父元素设置
display:flex+justify-content:center子元素自动水平居中，如果要垂直也居中则还要设置align-items:center或者align-content:center此时子元素都水平垂直居中align-self:center，垂直轴为主轴时也是一样。 -
父元素给个定位属性和高宽，子元素设置
position:absolute+left:50%+top:50%+transform:translate(-50%,-50%)，transform属性可以换成margin-left:-(子元素宽度一半)和margin-top:-(子元素高度一半)这样就能水平垂直居中了
- 父元素有定位和高宽，子元素设置
position:absolute+margin:auto+top:0+left:0+right:0+bottom:0，这样也能实现水平垂直居中了，过有些繁琐就是了
