flex布局就是给父级盒子设置display:flex,来改变子元素的排列方式。
flex布局中父级元素可以设置的属性
1.flex-directory
用来设置主轴的方向,然后子元素会跟着这个方向来排列,默认值是row行,也可以是column列。
2.justify-content
用来设置主轴上子元素的排列方式,默认值是flex-start,也可以是flex-end,这两个属性就是设置靠着哪边来排。
当值为center时,子元素会居中。
当值为space-around时,会完完全全的平均分配空间。(在主轴是row时每个盒子的margin-left和margin-right一样)
当值为space-between时,会先左右(贴着主轴)贴着两边,然后剩下的均分【最常用】。
3.flex-wrap
用来设置子元素是否换行,默认值是nowrap不换行,如果元素很多则会压缩演示,可以设置为wrap,这时会换行显示。
4.align-items设置侧轴上子元素的排列方式【子元素为单行】
默认值为flex-start,也可以为flex-end,设置靠着哪边来排,
center最重要,让子元素在侧轴上居中。
5.align-content设置侧轴上子元素的排列方式【子元素为多行】
默认值是flex-start,也可以是flex-end,子元素会依次靠着头或尾排列。
当值为center时,盒子整体居中。
当值为space-around时,会完完全全的平均分配空间。
当值为space-between时,会先在上下(贴着侧轴)贴着两边,然后剩下的均分。
6.flex-flow
合写flex-directory和flex-wrap。
flex布局中子元素可以设置的属性
1.flex属性
用来设置子元素所占的剩余空间的多少。
这里有很多很多想说的,但是不知道该怎么描述,差不多就是你设置很多flex的值,最后这些值的和就是剩余空间的所要分的份数,然后每个flex的值就占对应的份数(看你们能不能理解qaq,没法表达出来qaq)
2.align-self
设置自己在侧轴上的排列
3.order
设置子元素排列的先后顺序。默认是0 1 2 3…