Flex 布局语法

Flex 布局语法

• flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。
• 支持的浏览器
  
• 其中在webkit内核的浏览器中使用时，必须加上-webkit-前缀

.box{
  display: flex;
}

//行内元素也可用弹性布局
.box{
  display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

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

• 
  容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
  项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
• 容器的属性：(父元素的属性)
  
  • flex-direction ： 决定主轴的方向（即项目的排列方向）

       row:主轴为水平方向，项目沿主轴从左至右排列

　　　　column：主轴为竖直方向，项目沿主轴从上至下排列

　　　　row-reverse：主轴水平，项目从右至左排列，与row反向

　　　　column-reverse：主轴竖直，项目从下至上排列，与column反向

• flex-wrap：默认情况下，item排列在一条线上，即主轴上，flex-wrap决定当排列不下时是否换行以及换行的方式，可能的值nowrap(默认)|wrap|wrap-reverse

       nowrap：自动缩小项目，不换行

　　　　wrap：换行，且第一行在上方

　　　　wrap-reverse：换行，第一行在下面

nowrap

wrap-reverse

• flex-flow：是flex-direction和flex-wrap的简写形式，如：row wrap|column wrap-reverse等。默认值为row nowrap，即横向排列 不换行
• justify-content：（x轴）决定item在主轴上的对齐方式，可能的值有flex-start（默认），flex-end，center，space-between，space-around

• align-items：（y轴）定义项目在交叉轴上如何对齐，可能的值有flex-start|flex-end|center|baseline|stretch
  
• align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用，即item不止一行时，多行在交叉轴轴上的对齐方式。注意当有多行时，定义了align-content后，align-items属性将失效(多行垂直对齐方式)

	      flex-start：左对齐
	
	　　 　flex-end：右对齐

　　　　　　center：居中对齐

　　　　　　space- between：两端对齐

　　　　　　space-around：沿轴线均匀分布

　　　　　　stretch：各行将根据其flex-grow值伸展以充分占据剩余空间

• 项目的属性：（子元素的属性）
  • order:项目的排列顺序。数值越小，排列越靠前，默认为0

<div class="wrap">
    <div class="div" style="order:4"><h2>item 1</h2></div>
    <div class="div" style="order:2"><h2>item 2</h2></div>
    <div class="div" style="order:3"><h2>item 3</h2></div>
    <div class="div" style="order:1"><h2>item 4</h2></div>
</div>

• flex-grow:定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

<div class="wrap">
    <div class="div" style="flex-grow:1"><h2>item 1</h2></div>
    <div class="div" style="flex-grow:2"><h2>item 2</h2></div>
    <div class="div" style="flex-grow:3"><h2>item 3</h2></div>
</div>
即当有多余空间时item1、item2、和item3以1：2:3的比例放大。

• flex-shrink:定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同item的缩小比例
  如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
  负值对该属性无效
  
• flex-basis:　表示项目在主轴上占据的空间，默认值为auto

<div class="wrap">
    <div class="div" style="flex-basis:80px"><h2>item 1</h2></div>
    <div class="div" style="flex-basis:160px"><h2>item 2</h2></div>
    <div class="div" style="flex-basis:240px"><h2>item 3</h2></div>
</div>

• flex:flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

• align-self :align-self属性允许item有自己独特的在交叉轴上的对齐方式，它有六个可能的值。默认值为auto

auto：和父元素align-self的值一致

　　　　　　flex-start：顶端对齐

　　　　　　flex-end：底部对齐

　　　　　　center：竖直方向上居中对齐

　　　　　　baseline：item第一行文字的底部对齐

　　　　　　stretch：当item未设置高度时，item将和容器等高对齐

• flex布局实例： 参考（阮一峰flex实例布局）：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html