flex布局

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：表示，即使空间不足，该子元素也不缩小