Flex弹性布局

1、Flex=Flexible Box的缩写，采用flex布局的元素，称为flex容器；它的所有子元素自动成为容器成员，称为flex项目（flex item）。设置容器属性display：flex。

2、属性

 

容器属性flex-flow: flex-direction  flex-wrap
　　flex-direction: row || row-reverse || column || column-reverse（设置主轴方向，即子元素的排列方向）

　　flex-wrap: nowrap || wrap || wrap-reverse（是否换行）

 

 

容器属性justify-content: flex-start || flex-end || center || space-between || space-around(子元素在主轴方向的排列方式)

 

 

容器属性align-items: flex-start || flex-end || center || stretch(默认值) || baseline，
　　对于默认值stretch，如果子元素没有设置高度或者auto，则被拉伸占整个容器高度或宽度

 

项目属性fiex: flex-grow || flex-shrink || flex-basis  (用于处理容器剩余空间)
　　flex-grow: 默认值是0，用于扩展子元素的宽度，设置当前子元素应该占据剩余空间的比例，
　　该比例 = （该子元素的flex-grow值）除以（所有兄弟元素的flex-grow值之和）；
　　flex-shrink:默认值为1，当空间不足时，子元素将缩小。

项目属性align-self:属性值与align-items相同，设置单个子元素在交叉轴的排列方式。