Flexbox介绍

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲，弹性盒改进了盒模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。

最大的特点就是弹性（弹弹弹，弹掉鱼尾纹~~），就不用为了一个水平排列到处float了。。

一基本概念

flex-box是css3的一个模块，不是一个属性，它涉及到很多东西，包括很多属性。主要包括两大部分：一个容器（flex container）和许多的子元素（flex items）。

看下图，了解一些概念。

Flexbox介绍

main axis：主轴方向

main start | main end：主轴开始和主轴结束。两者定义了flex items主轴方向上的布局范围。

cross axis：横轴方向

cross start | cross end：横轴开始和横轴结束，两者定义了flex item横轴方向上的布局范围。

需要注意的是主轴和横轴不是绝对的，取决于flex-direction的设置，见下文。

main size：flex item主轴方向上的宽度

cross size：flex item横轴方向上的宽度

下面分别来看flex container和flex items的相关属性。

二 flex container

1 通过设置display属性为flex或者inline-flex来定义弹性容器，即flex container。

.container {
  display: flex; /* or inline-flex */
}

2 设置主轴方向

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row：默认，从左到右

row-reverse：从右到左

column：从上到下

column-reverse：从下到上

3 强制换行

默认情况下，容器将子元素始终在一行排列。但你也可以设置换行。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

4 flex-flow，flex-direction和flex-wrap的简写

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

5 设置主轴排列

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start: 紧靠main start依次排列

flex-end：紧靠main end依次排列

center：居中

space-between：充满main size，最两边的紧贴main start和main end

space-around：充满main size，根据子元素的个数，每一部分子元素居中（估计没说明白orz）

6 设置横轴排列

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

7 多行设置

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

这个很像justify-content，不过需要出现多个flex container的时候设置这个属性才有效

三 flex items

1 设置排列顺序，数字越大，显示的越靠后。

.item {
  order: <integer>;
}

2 设置占用空间

.item {
  flex-grow: <number>; /* default 0 */
}

有了这个属性，可以随意设置子元素所占父元素的宽度。

3 设置伸缩比

.item {
  flex-shrink: <number>; /* default 1 */
}

4 flex-basis 主轴方向的默认宽度

.item {
  flex-basis: <length> | auto; /* default auto */
}

5 flex属性，上面三个的缩写

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

建议使用flex属性。

6 设置排列，类似align-items

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

注：在flex-items里，float, clear 和 vertical-align 均没有效果。

介绍了这么多，可以去这里一个一个属性的试验效果：http://runjs.cn/code/zr67ihch

下面来看个例子：

实现这样的效果，布局的经典实例。

Flexbox介绍

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>

        <style>

            .wrapper {
                display: flex;
                flex-flow: row wrap;
                font-weight: bold;
                text-align: center;
            }

            .wrapper > * {
                padding: 10px;
                flex: 1 100%;
            }

            .header {
                background-color: #ff6347;
            }
            .main {
                background-color: #ffd700;
            }
            .aside-1 {
                background-color: #00bfff;
            }
            .aside-2 {
                background-color: #ff69b4;
            }
            .footer {
                background-color: #90ee90;
            }

            @media all and (min-width: 600px) {
                .aside {
                    flex: 1 auto;
                }
            }

            @media all and (min-width: 800px) {
                .main {
                    flex: 2 0;
                }

                .aside-1 {
                    order: 1;
                }
                .main {
                    order: 2;
                }
                .aside-2 {
                    order: 3;
                }
                .footer {
                    order: 4;
                }
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <header class="header">Header</header>
            <article class="main">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
            </article>
            <aside class="aside aside-1">Aside 1</aside>
            <aside class="aside aside-2">Aside 2</aside>
            <footer class="footer">Footer</footer>
        </div>
    </body>
</html>

这里的布局是移动优先的，首先布局的是移动设备显示的，然后分别定义大于600px和大于800px时的显示。

到这里看源码：http://runjs.cn/code/tt7kilpk

到这里看更多的示例： A Complete Guide to Flexbox

flex-box已经更新三个规范，浏览器支持情况如下：

Flexbox介绍