flex 布局

flex 布局

Flex Layout 的目的是为了提供一种高效的方式去为一个容器里面元素布局，对齐，分配空间，即使他们的大小尺寸是未知的，或者是动态变化的

父容器有能力修改里面子元素的宽度和高度从而更好的分配空间。

更重要的是flexbox布局方向可以灵活变化，比较适合小范围的布局，grid比较适合大范围的布局

要想flex布局生效，需要父元素和里面的子元素配合相关属性使用，这种布局是基于flex方向（flex-flow directions），如下图：

里面item布局要么沿着main axis 方向，要么沿着cross axis方向（从对应的 start-->end）

以下属性应用于父元素（容器）

display: flex | inline-flex;

定义容器为块还是内联

注意： css columns 对应用了flex的父元素无效 float，clear，vertical-align对子元素无效

flex-direction：row | row-reverse | column | column-reverse

定义容器里面内容flex的方向

flex-wrap: nowrap | wrap | wrap-reverse

这个定义了容器是单行，还是多行，以及cross axix的方向（也就是多行的话新行方向）

nowrap 默认值，单行（方向跟随direction属性）

wrap 多行

wrap-reverse 多行，方向相反

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

是flex-direction 和 flex-wrap属性的缩写(就像font)，它们定义了容器的main and cross axis，默认是row nowrap

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

定义内容main axis的方向，它用来帮助分配多余的空间，当里面的内容都是固定大小或者里面的内容可缩放但是达到了最大极限

同时还可以控制行内对齐的方式

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

定义容器里面的内容在当前行 cross axis 对齐方式，类似justify-content

当cross轴有多余空间的时候，这个属性定义了对齐方式

以下属性定义在子元素上（容器里面的内容）

order: <integer>

定义子元素出现顺序，默认是按照子元素代码顺序排，可以人为修改

flex-grow: <number> (default 0)

定义非固定大小子元素应该占据的比例，相对于父元素大小而言，例如所有子元素都设为1，那么每个子元素会平均分配父元素的空间，不可以为负值

flex-shrink: <number> (default 1)

定义子元素缩放比例，不可为负值

flex-basis: <length> | auto (default auto)

定义子元素在多余空间分配之前的默认大小

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] (Default 0 1 auto)

前面三个属性的缩写，第二，第三个参数是可选的

这个属性可以单独设置/改变一个子元素的align-items

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

因为flexbox语法在过去几年有了不少改动，所以考虑兼容性应该混合新旧语法，为了实现下面这张图效果

<div class="page-wrap">

<section class="main-content">
<h1>Main Content</h1>
<p><strong>I'm first in the source order.</strong></p>
<p>The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. Fry, we have a crate to deliver. Hey, guess what you're accessories to.</p>
<p>I'll get my kit! That's not soon enough! Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man.</p>
</section>

<nav class="main-nav">
<h2>Nav</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>

<aside class="main-sidebar">
<h2>Sidebar</h2>
<p>I am a rather effortless column of equal height.</p>
</aside>

</div>

.page-wrap {
display: -webkit-box;           /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;              /* OLD - Firefox 19- (doesn't work very well) */
display: -ms-flexbox;           /* TWEENER - IE 10 */
display: -webkit-flex;          /* NEW - Chrome */
display: flex;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-content {
-webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
-ms-flex-order: 2;              /* TWEENER - IE 10 */
-webkit-order: 2;               /* NEW - Chrome */
order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
60%;                     /* No flex here, other cols take up remaining space */
-moz-box-flex: 1;               /* Without this, Firefox 19- expands to widest paragraph, overrides width */
background: white;
}
.main-nav {
-webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
-ms-flex-order: 1;              /* TWEENER - IE 10 */
-webkit-order: 1;               /* NEW - Chrome */
order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1;               /* OLD - Firefox 19- */
20%;                     /* For old syntax, otherwise collapses. */
-webkit-flex: 1;                /* Chrome */
-ms-flex: 1;                    /* IE 10 */
flex: 1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */
background: #ccc;
}
.main-sidebar {
-webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
-ms-flex-order: 3;              /* TWEENER - IE 10 */
-webkit-order: 3;               /* NEW - Chrome */
order: 3;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1;            /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1;               /* Firefox 19- */
20%;                     /* For OLD syntax, otherwise collapses. */
-ms-flex: 1;                    /* TWEENER - IE 10 */
-webkit-flex: 1;                /* NEW - Chrome */
flex: 1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */
background: #ccc;
}

浏览器支持情况

Chrome any

Firefox any

Safari any

Opera 12.1+

IE 10+

iOS any

Android any

(注意)

09年之前旧的语法（触屏版淘宝目前用这一套）

.grid {

display:-webkit-box;

}

.column {

padding: 20px;

}

.fluid {

-webkit-box-flex: 1;

background: #ccc;

}

.fixed {

400px;

background: red;

}

新修改的语法

.grid {

/* As of August 2012, only supported in Chrome 21+ */

display: -webkit-flex;

display: flex;

}