移动端的布局：flex布局

一、简单介绍flex

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

任何一个容器都可以指定为Flex布局。

Webkit内核的浏览器，必须加上 -webkit 前缀。

***注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

.parent {display:-webkit-flex;}

.child1 {flex:1;}

.child2{flex:2}

.child3{flex:3}

二、关于flex的兼容性问题

新flex布局

display：-webkit-flex;

-webkit-flex:1;

旧flexbox布局

display:-webkit-flex-box;

-webkit-flex-box:1;

三、flex的其它属性

• flex-direction flex-wrap flex-flow justify-content align-items
  • align-content
• flex-direction
• flex-direction属性决定主轴的方向（即项目的排列方向）。

• <div class="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div>

• .box{ flex-direction: row | row-reverse | column | column-reverse;

• 	display:flex;}

• • flex-direction:row;
• 
  
• flex-direction:row-reverse;
• 
• flex-direction:column;
• 
• flex-direction:column-reverse;
• 
  
• flex-wrap
  

• flex-wrap属性

• • .box{ flex-direction:nowrap| wrap| wrap-reverse | initial | inherit;

  • 	display:flex;}

  nowrap：
  flex容器为单行。该情况下flex子项可能会溢出容器
  wrap：
  flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
  wrap-reverse：
  反转 wrap 排列。
• intial 设置该属性为它的默认值。
• inherit 继承父元素的属性
• flex-flow
  

• • flex-flow属性(flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。)

  • flex-flow: flex-direction flex-wrap|initial|inherit;

    <'  flex-direction '>：

    定义弹性盒子元素的排列方向。

    <'  flex-wrap '>：

    控制flex容器是单行或者多行。
  • justify-content

  • justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

  • justify-content: flex-start(默认值)|flex-end|center|space-between|space-around|initial|inherit;

    • flex-start相当于text-align的left，向左靠齐
    • flex-end相当于text-align的right，向右靠齐
    • center相当于text-align的center，居中
    • space-between项目位于各行之间留有空白的容器内。（可参考菜鸟教程中的实例）
    • space-around项目位于各行之前、之间、之后都留有空白的容器内。（可参考菜鸟教程中的实例）
      
    • align-items
      

    • align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

      align-items: stretch（默认值）|center|flex-start|flex-end|baseline|initial|inherit;

      （建议参考菜鸟教程里的案例，更容易理解）
    • •     align-content  

      • • align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

          
          
  • 
    
  • 
    

dff