flex布局通过给父元素设定 display: flex, 来控制子元素的排列布局样式
flex父元素支持的属性如下:
- flex-direction: 子元素的排列方向 row | row-reverse | column | column-reverse
- row | row-reverse 按行排列,主轴为横轴
- column | column-reverse 按列排列,主轴为纵轴
- justify-content:设定主轴上的子元素分布方式 flex-start | flex-end | center | space-between | space-around
- space-between 两边贴边,中间平分空间
- space-around 所有子元素共同拥有相同的左右边距
- flex-wrap: 子元素是否换行或者换列(根据排列方向自动适应) nowrap | wrap | wrap-reverse
- align-content:多行 侧轴上子元素的排列方式 flex-start | flex-end | center | space-between | space-around | stretch
- align-items:单行 侧轴上子元素的排列方式 flex-start | flex-end | center | baseline | stretch 纵轴方向单行对齐
flex子元素布局支持的属性:
- flex 表示子元素占用多少空余份额,参数为数字,表示占比对应比例的剩余空间,设定时一般子元素不设定尺寸,由父元素的空余空间中获取
- align-self: 表示子元素可以单独设定其自己的align-items属性,独立对齐 auto | flex-start | flex-end | center | baseline | stretch
- flex-grow: 0: 表示存在剩余空间,子元素也不放大
- flex-shrink:0:表示,即使空间不足,该子元素也不缩小