移动端布局--flex布局

为盒状模型提供最大的灵活性

• 将父盒子设置为flex布局以后，子元素的float、clear和vertical-align都将失效
• 伸缩布局=弹性布局=伸缩盒布局=flex布局

1.布局原理

通过给父盒子添加flex布局来控制子盒子的位置和排列方式

2.flex布局常见父项属性

1. flex-direction:设置主轴方向
   默认x方向为主轴，取值如下
   

2. justify-content:设置主轴上的子元素排列方式
   注意：使用这个属性前一定要确定好主轴是哪个
   

3. flex-wrap:设置子元素是否换行

   默认不换行，父盒子装不下会缩小子元素的宽度
   

4. align-items:设置侧轴上的子元素排列方式（单行）
   

5. align-content:设置侧轴上的子元素的排列方式（多行）
   只能用于子项出现换行的情况
   

6. flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

3.flex布局子项常见属性

• flex子项目占的份数，值为number，0,1,2,3…默认0
• align-self控制子项自己在侧轴的排列方式
• order属性定义子项的排列顺序（前后顺序）,数值越小越靠前，默认0