flex布局 | 豆豉的博客

相比较传统布局，flex在处理元素垂直居中上会简单很多，而且在兼容性方面现在基本主流浏览器都已经兼容。所以如果你还在用float或者position布局，那么建议你尝试用一下flex，你会发现布局原来是那么简单的一件事情。

flex其实就是一个容器，在其里面所有的子元素会自动生成为flex项目，下面就介绍一下flex容器的6个属性以及其子元素flex项目的6大属性

一：flex容器的6大属性

flex-direction:row | row-reverse | column | column-reverse

该属性表示flex项目的主轴式横向还是纵向的，一共有4个属性值
1 . row：主轴是水平方向，起点在左端。

2 . row-reverse：主轴为水平方向，起点在右端。

3 . column：主轴为垂直方向，起点在上沿。

4 . column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap:nowrap | wrap | wrap-reverse

这个属性用于定义flex项目是否在统一轴线上
1 . nowrap:(默认)不换行
2 . wrap：换行，第一行在上面
3 . wrap-reverse：换行，第一行在最下面

flex-flow：这个属性就是flex-direction属性和flex-wrap属性的总和

justify-content：flex-start | flex-end | center | space-between | space-around

定义项目在主轴上对齐方式
1. flex-start:(默认)左对齐
2 .flex-end：右对齐
3 .center：居中
4 .space-between：两端对齐，项目之间的间隔相等
space-around：每个项目两侧间隔相等，所以，项目之间的间隔比项目和边框的间隔大一倍

align-items：flex-start | flex-end | center | stretch | baseline

定义入股交叉轴只有一条的情况下，交叉轴的对齐方式
1 .flex-start:交叉轴起点对齐
2 .flex-end：交叉轴终点对齐
3 .center：交叉轴中点对齐
4 .baseline：项目第一行文字的基线对齐
5 .stretch：如果项目没有设置高度或者设置为auto，将占满整个容器的高度

align-content：flex-start | flex-end | center | space-between | space-around | stretch

定义多根轴线的对齐方式，如果轴线只有一条该属性就无效
1 .flex-start:交叉轴起点对齐
2 .flex-end：交叉轴终点对齐
3 .center：交叉轴中点对齐
4 .space-between：和交叉轴两端对齐，轴线之间的间距平均分布
5 .space-around：每根轴线2侧的间距都相等，所以轴线之间的间距比轴线和边框的间距大一倍
6 .stretch：占满整个容器的高度

二：flex项目的6大属性

order：0

定义项目的排列顺序，默认为0

flex-grow：0

定义项目的放大比例，默认为0，即如果存在剩余空间也不放大，如果1则表示等比例放大，如果有一个为2，则该项目占据剩余空间的大小是其他的2倍

flex-shrink：1

定义项目的缩小比例，如果空间不足，该项目就会缩小

flex-basis：

定义在分配多余空间之前，计算主轴是否有多余的剩余空间，也就是固定项目的大小了

flex：auto（1 1 auto） | none

flex-grow、flex-strink、flex-basis3个的总和。默认有2个快捷写法

align-self：auto | flex-start | flex-end | center | baseline | stretch

允许单个项目和其他项目不一样的对齐方式，可以覆盖flex容器中的align-items属性。
1. flex-start:交叉轴起点对齐
2 .flex-end：交叉轴终点对齐
3 .stretch：如果项目没有设置高度或者设置为auto，将占满整个容器的高度

三：实战布局

1:圣杯布局

html:

<body>
  <div class="header"></div>
  <div class="main">
  <div class="left"></div>
  <div class="right">
    <div>1/3</div>
    <div>1/3</div>
    <div>1/3</div>
  </div>
  </div>
  <div class="footer"></div>
</body>

css:

*{
   margin:0;
   padding:0
 }
 html,body{
   width:100%;
   height:100%;
 }
 body{
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
 }
 .header{
   background:red;
   height:50px;
 }
 .main{
   flex:1;
   background:yellow;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
 }
 .left{
   width:200px;
   background:#2D93CA;
 }
 .right{
   flex:1;
   background:black;
   display: flex;
   flex-flow:row nowrap;
   justify-content: space-around;
   align-items:flex-start;
 }
 .right>div{
   flex:1;
   background:#ddd
 }
 .footer{
   background:blue;
   height:60px;
 }

结果:
result

参考链接

语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
实战篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
css兼容性查询：http://caniuse.com/#search=f%20le