CSS3 -- display:flex

弹性盒子: 上下左右居中、换行、栅格布局

零、

父元素为display: flex;孙元素不受影响：所以想让子元素不受父元素影响，在子元素上套一层，让子元素变成孙元素

一、容器的属性（6）

display、 flex-direction、 flex-wrap、 justify-content、 align-items、 align-content

❶ display: inline-flex / flex;

(Webkit内核的浏览器，必须加上-webkit前缀。)

❷ flex-direction: row | row-reverse | column | column-reverse;（主轴左右还是上下，左始还是右始）

❸ flex-wrap: nowrap | wrap | wrap-reverse;（项目换行）

❹flex-flow: <flex-direction> || <flex-wrap>;（❷ 和 ❸的合体）

❺ justify-content: flex-start | flex-end | center | space-between | space-around;（主轴对齐方式）

　　space-between：两端对齐，项目之间的间隔都相等。
　　space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

❻ align-items: flex-start | flex-end | center | baseline | stretch;（交叉轴对齐方式）

　　baseline: 项目的第一行文字的基线对齐。
　　stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

display: flex;
justify-content: center;
align-items: center;
 100%;
/* 为什么加 100%;才能上下左右居中 */
/* 会让子元素上下左右居中*/

二、项目的属性（6、儿子的属性）

① order: <integer>; （/* default 0 */ 插队排序 -- 类z-index）

② flex-grow　　　　/* default 0 */

③ flex-shrink　　　　/* default 1 */

④ flex-basis

⑤ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]（② ③ ④简写）

⑥ align-self

三、

Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item）

主轴
交叉轴
main start
main end
cross start
cross end
main size（宽）
cross size（高）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex</title>
    <style>
        .flex{
            display: flex;
             auto;
            height: 200px;
            background: #ccc;
        }
        .inlineFlex{
            display: inline-flex;
             auto;
            height: 200px;
            border: 1px solid #000;
            margin-top: 20px;
        }
        section{
            /* margin-left: 10px; */
            /*  200px; */
            flex-grow: 1;
        }
        .f1{
            order: 9;
        }
        .f2{
            flex-grow: 2;
        }
        .f3{
            
        }
        .f4{
            order: -2;
        }
        .f5{
            
        }
        .f6{
            
        }
    </style>
</head>
<body>
    <div class="flex">
        <section class="f1">1</section>
        <section class="f2">2</section>
        <section class="f3">3</section>
        <section class="f4">4</section>
        <section class="f5">5</section>
    </div>
    <div class="inlineFlex">
        <article>01</article>
        <article>02</article>
        <article>03</article>
        <article>04</article>
        <article>05</article>
        <article>06</article>
        <article>07</article>
    </div>
    <div class="inlineFlex"></div>
</body>
</html>

父元素平分三个子元素　　

flex-wrap父
子flex: 0 0 33.3%; / 0 0 100px%;

http://www.runoob.com/w3cnote/flex-grammar.html ->

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html