flex布局

网页布局一直是CSS的一个重点应用,布局的传统方法是基于盒模型,依赖display属性+position属性+float属性。它对于那些特殊布局方法非常不方便,比如,垂直居中。
2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex是什么

Flex 是Flexible Box的缩写,意味着弹性布局,它可以应用到任意一个容器上。

1
2
3

div{
display:flex;
}

也可以应用到行内元素上:

1
2
3

span{
display:inline-flex;
}

设置Flex布局后，子元素的clear属性和float属性和vertical-align将失效。

容器的属性

以下6个属性设置在容器中:
 - flex-direction
 - flex-wrap
 - flex-flow
 - justify-content
 - align-items
 - align-content

1.flex-direction属性

flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

div{flex-direction:row;}           /* 主轴为水平方向，起点在左端。 */
div{flex-direction:row-reverse;}    /* 主轴为水平方向，起点在右端。 */
div{flex-direction:column;}         /* 主轴为垂直方向，起点在上沿。 */
div{flex-direction:column-reverse;} /* 主轴为垂直方向，起点在下沿。 */

2.flex-wrap属性

flex-wrap 是指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

1
2
3

div{flex-wrap:nowrap;}          /*nowrap（默认）：不换行。*/
div{flex-wrap:wrap;}            /*wrap：换行，第一行在上方。*/
div{flex-wrap:wrap-reverse;}    /*wrap-reverse：换行，第一行在下方。*/

3.flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

1	div{flex-flow: row nowrap;}

4.justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

div{justify-content: flex-start;}     /*flex-start（默认值）：左对齐*/
div{justify-content: flex-end}        /*flex-end：右对齐*/
div{justify-content: center}          /*center： 居中*/
div{justify-content: space-between}   
/*space-between：两端对齐，项目之间的间隔都相等。*/
div{justify-content: space-around;}   
/*space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/

具体参考 http://js.jirengu.com/rokij 除了以上5种，还有其他属性，兼容性未测试。

5.align-items属性

align-items属性定义项目在交叉轴上如何对齐。

div{align-items: flex-start;}  /*flex-start：交叉轴的起点对齐。*/
div{align-items: flex-end;}    /*flex-end：交叉轴的终点对齐。*/
div{align-items: center;}      /*center：交叉轴的中点对齐。*/
div{align-items: baseline;}    /*baseline: 项目的第一行文字的基线对齐。*/
div{align-items: stretch;}     
/*stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/

具体参考 http://js.jirengu.com/vagor 除了以上5种，还有其他属性，兼容性未测试。

6.align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

div{align-content:flex-start;}     /*flex-start：与交叉轴的起点对齐。  */
div{align-content:flex-end;}       /*flex-end：与交叉轴的终点对齐。*/
div{align-content:center;}         /*center：与交叉轴的中点对齐。*/
div{align-content:space-between;}  
/*space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。*/
div{align-content:space-around;}   
/*space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。*/
div{align-content:stretch;}        /*stretch（默认值）：轴线占满整个交叉轴。*/

具体参考 http://js.jirengu.com/dozuy 除了以上6种，还有其他属性，兼容性未测试。

项目的属性

以下6个属性设置在项目中:
 - order
 - flex-grow
 - flex-shrink
 - flex-basis
 - flex
 - align-self

1.order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

HTML代码:

<main>
  <article>1</article>
  <nav>2</nav>
  <aside>3</aside>
</main>

CSS代码:

main { display: flex;  text-align:center; }
main > article { flex:1;        order: 2;background: red;}
main > nav     { width: 200px;  order: 1;background: blue;}
main > aside   { width: 200px;  order: 3;background: yellow;}

具体例子: http://js.jirengu.com/qolov

2.flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果flex-grow的属性为1，在项目种的所有容器平分整块区域，每块区域一样大小。如果有一个容器属性为2，其余都为1，那么这个容易的大小比其他容器要大一倍。

HTML代码:

<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>

CSS代码:

1
2
3

#content {display: flex;justify-content: space-around;flex-flow: row wrap;align-items: stretch;}
.box {flex-grow: 1;border: 3px solid rgba(0,0,0,.2);}
.box1 {flex-grow: 2;border: 3px solid rgba(0,0,0,.2);}

具体例子 :http://js.jirengu.com/lamob

3.flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

HTML代码：

<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>

CSS代码:

#content {display: flex;width: 300px;}
#content div {flex-basis: 120px;border: 3px solid rgba(0,0,0,.2);}
.box { flex-shrink: 0;}
.box1 { flex-shrink: 2; }

具体例子: http://js.jirengu.com/nusun

4.flex-basis属性

flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。
它可以设为跟width或height属性一样的值（比如200px），则项目将占据固定空间。

语法(参考MDN):

/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;

/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

5.flex属性

flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，可以同时设置flex-grow, flex-shrink与flex-basis。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

MDN正式语法:

1
2
3

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

6.align-self属性

属性 align-self 会对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

参考链接:

__END__

文章作者：o0Chivas0o
文章出处：flex布局
作者签名：Rich ? DoSomethingLike() : DoSomethingNeed()
版权声明：文章除特别声明外，均采用 BY-NC-SA 许可协议，转载请注明出处