**

关于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
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐