关于flex定位讲解

**

关于flex定位讲解

**
首先我们要知道flex是我们移动端常用布局，当然pc端也可以，接下来我们了解一下flex：

整体分为两部分：

1. 一般情况下语法添加在父容器，即display：flex
2. 默认情况下，在弹性盒子元素中元素容器左右排列，即flex-direction：row
3. 还有就是写在子元素里
   接下来我们了解听他的每一个属性
   display：flex，这个属性就是改变我们正常盒模型变成弹性盒模型
   flex-direction： 这个属性是用来子项的整体布局方向，默认值是row 从左到右排列，当值为column 这个代表列 从上到下排列
   flex-war：warp 换行值，默认nowrap 不换行。
   justify-content：决定主轴方向上子项对齐和分布方式，一般常用值space-around：就是每个flex两侧都环绕互不相干，spac-evenly：代表flex两侧空白间距相同，默认值是flex-start，子项都在起始位置对齐。
   align-items，flex子项相对于flex容器在侧轴相对方式，也可理解为flex垂直居中的方式，取值：center居中对齐 ，flex-end底对齐，flex-start，默认值子项拉伸。
   align-content：这个值和justify-content相反的操作，并且最小需要两行才能看出效果，值和justify-content相同。
   注意：弹性布局的方式是做一维布局 ，网格适合做二维布局。
   作用在子项的css属性：
   order
   改变某个子项的位置，值越大，越靠后，默认值是0
   flex-grow：扩展，注意要想看到扩展必须右空隙，当值为0就是不扩展 ，当值为1就是把空隙全占满，.5占空隙的一半，也可以理解相当于比例值，当值相同就将空隙等分。
   flex-shrink：收缩，默认值为1，当为0时候就不收缩了，会溢出，没有负数
   flex-basis这个值和flex-shrink很像设置一个具体值，若空间满了就不会变大了。
   逆战2020.3.1