设置父元素的布局为flex,后续的子元素都按此来排序
display: flex;
【1】默认的主轴是x轴,元素跟着主轴来排列
【2】设置y轴为主轴,那么x轴就成为了侧轴:
flex-direction:column;
【3】justify-content:设置主轴上子元素的排列方式
1)设置主轴上子元素的排列方式,默认从头部开始,如果主轴是x轴,既从左到右,如果
2) 以下属性值,不设置默认为flex-start
flex-start:默认从头部开始,如果主轴是x轴,既从左到右,如果主轴是y轴,则默认从上到下
flex-end:以主轴为标准,从尾部开始排列
space-around:平分剩余空间
center 主轴居中对齐
space-between:先两边贴边,再平分剩余空间
【4】flex-wrap:设置子元素是否换行
默认不换行,如果装不下,会缩小子元素的宽度,放到父元素里面去。
nowrap:不换行
rap:换行
【5】align-items:设置侧轴的子元素排列方式,在子项为单行时使用
flex-start:侧轴从头到尾
flex-end:侧轴从尾到头
center:侧轴垂直居中
stretch:拉伸,但是子盒子不要给高度
【6】align-content:设置侧轴子元素的排列方式,,并且只能用于子元素换行的情况下才能有效果(即多行)
即先设置父元素为flex-wrap:wrap,子元素才能设置以上属性
【7】flex-flow:把设置主轴方向和是否换行(是否换列)的简写
例如:
flex-flow:column wrap;
flex-flow:row wrap;
【8】flex布局子项常见属性
1】flex:定义子项目分配剩余空间,用flex表示占多少份数