flex弹性布局

flex弹性布局

• 任何一个容器都可以指定为flex布局
• 当我们父盒子设为flex布局以后，子元素的float、clear和vertical-align属性失效
• 移动端应用广泛、pc端浏览器支持情况较差

1.常见的父项属性（给父元素添加的）：

　　

flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行，默认情况下，项目都排在一条轴线上（装不下会自动缩小子元素的宽度）
align-items:设置侧轴上的子元素的排列方式（单行）
align-content:设置侧轴上的子元素的排列方式（多行，在单行下设置该属性是没有效果的）

 

2.子项属性（给子项添加）：

flex:属性定义子项目分配剩余空间
align-self:控制子项自己在侧轴上的排列方式
order:定义子项的排列顺序（前后顺序），数值越小，排列越靠前，默认值为0