flex布局-概念及骰子布局

注：概念部分借鉴菜鸟教程，概念部分图片来源菜鸟教程
http://www.runoob.com/w3cnote/flex-grammar.html

1. 概念
1. flex容器的属性
- 2.1. flex-direction
- 2.2. flex-wrap
- 2.3. flex-flow
- 2.4. justify-content
- 2.5. align-items
- 2.6. align-content
1. 项目的属性
- 3.1. order
- 3.2. flex-grow
- 3.3. flex-shrink
- 3.4. flex-basis
- 3.5. flex
- 3.6. align-self
1. flex布局实践（骰子布局）
1. 总结
1. 源码

一、概念

flex布局称为flex容器，flex容器默认两根轴：水平主轴和垂直交叉轴。以下概念都围绕水平主轴和垂直交叉轴而定义。

flex

二、flex容器的属性

以下6个属性设置在容器上。

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

1. flex-direction 决定主轴的方向

row(默认值): 主轴水平方向，左端为起点

row-reverse: 主轴水平方向，右端为起点

column: 主轴垂直方向，上端为起点

column-reverse: 主轴垂直方向，下端为起点

flex-direction

2. flex-wrap 项目是否排列在轴线上，是否换行属性

nowrap(默认值): 不换行

wrap: 换行，第一行在上方

wrap-reverse: 换行，第一行在下方

flex-wrap

3. flex-flow:<flex-direction> <flex-wrap> flex-direction和flex-wrap的简写

4. justify-content 定义主轴上的对其方式

flex-start(默认值): 左对齐

flex-end: 右对齐

center: 居中

space-between: 两端对其，项目间间距相等

space-around: 每个项目两端的间距相等

justify-content

5. align-items 项目在交叉线上的对齐方式

flex-start: 交叉线的起点对齐

flex-end: 交叉线的终点对齐

center: 交叉线的中心对齐

baseline: 项目第一行文字的基线对齐

stretch(默认值): 如果项目未设置高度或auto,将占满容器的高度

align-items

6. align-content 多行对其，如果只有一行，不起作用

flex-start: 与交叉点的起点对齐

flex-end: 与交叉点的终点对齐

center: 与交叉点的中心对齐

space-between: 与交叉线两端对齐，轴线间间隔平均分配

space-around: 每根轴线间隔相等

stretch: 轴线占满整个交叉线

align-content

三、项目的属性

以下6个属性设置在项目上。

order

flex-grow

flex-shrink

flex-basis

flex

align-self

1. `order`定义项目的排列顺序，值越小越靠前，默认为0

.item {
order: <integer>;
}

order

2. `flex-grow`定义项目的放大比例，默认为0

.item {
flex-grow: <number>;
}

flex-grow

如果flex-grow为1，则项目等分，如果有一个为2，其他为1，则该项目是其他项目的两倍。

3. `flex-shrink`定义项目的缩小比例，默认值为1。

.item {
flex-shrink: <number>;
}

flex-shrink

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

4. `flex-basis`定义在分配空间之前，项目占主轴空间，默认值为auto。

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

它可以设为跟width或height属性一样的值（比如250px），则项目将占据固定空间。

5. `flex`属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

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

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。习惯使用这个属性。

6. `align-self`属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性, 默认值为auto。

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

align-self

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

四、flex布局实践（骰子布局）

假设骰子的一面最多可以放9个点。

sz.png

下面来说如何使用flex布局骰子，html默认为

    <div class="box">
        <div class="item"></div>
    </div>

.box元素代表flex容器，.item元素代表一个项目，需要几个项目就有几个class为item的div元素。

1. 单项目

1.1 首先左上角一个点，默认情况即可。

s1.png

    .box {
        width: 60px;
        height: 60px;
        border: 1px solid white;
        background: white;
        border-radius: 5px;
        display: flex;
        margin: 10px;
    }

.box的样式为以上，下面所有都依据这个来的。

1.2 黑点在第一行居中对齐，使用justify-content: center即可。

s2.png

    .box.one1 {
        flex-direction: row;   /* 默认值可以不写*/
        justify-content: center;
    }

1.3 黑点在第一行右对齐，使用justify-content: flex-end。

s3.png

    .box.one2 {
        justify-content: flex-end;
    }

1.4 黑点在第二行第一个，转化为垂直交叉线排列方式，居中即可。

s4.png

    .box.one3 {
        align-items: center;
    }

1.5 黑点垂直水平居中

s5.png

    .box.one4 {
        align-items: center;
        justify-content: center;
    }

1.6 黑点在第二行右侧

s6.png

    .box.one5 {
        align-items: center;
        justify-content: flex-end;
    }

1.7 黑点在最后一行第一个

s7.png

    .box.one6 {
        align-items: flex-end;
    }

1.8 黑点在最后一行居中

s8.png

    .box.one7 {
        align-items: flex-end;
        justify-content: center;
    }

1.9 黑点在最后一行最后一个

s9.png

    .box.one8 {
        align-items: flex-end;
        justify-content: flex-end;
    }

2. 双项目

html模版为

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
</div>

2.1 第一行左右布局

b1.png

    .box.two1 {
        justify-content: space-between;
    }

2.2 左侧上下布局

b2.png

  .box.two2 {
        flex-direction: column;
        justify-content: space-between;
    }

2.3 居中上下布局

b3.png

    .box.two3 {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

2.4 右侧上下布局

b4.png

    .box.two4 {
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
    }

2.5 左上右下布局

    .box.two3 {
        justify-content: space-between;
    }
    .two3 .item:last-child {
        align-self: flex-end;
    }

3. 三项目

html模版

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

3.1 一左二中三右布局

    .three1 {
        flex-direction: column;
    }
    .three1 .item:nth-child(2) {
        align-self: center;
    }
    .three1 .item:nth-child(3) {
        align-self: flex-end;
    }

3.2 一右二中三左布局

    .three2 {
        flex-direction: column;
        align-items: flex-end;
    }
    .three2 .item:nth-child(2) {
        align-self: center;
    }
    .three2 .item:nth-child(3) {
        align-self: flex-start;
    }

4. 四项目

4.1 第一排铺满，最后一排右布局
模版：

<div class="box four1">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

图：

样式：

    .four1 {
        flex-wrap: wrap;
        justify-content: flex-end;
        align-content: space-between;
    }

4.2 上下左右四个角布局
html模版:

<div class="box four2">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

图：

image.png

样式：

    .four2 {
        flex-direction: column;
        justify-content: space-between;
    }
    .column {
        display: flex;
        justify-content: space-between;
    }

5. 五项目

html模版：

<div class="box four2">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column mid">
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

图：

five

样式：

    .four2 {
        flex-direction: column;
        justify-content: space-between;
    }
    .column {
        display: flex;
        justify-content: space-between;
    }
    .mid {
        align-items: center;
        justify-content: center;
    }

6. 六项目

html模版：

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

6.1 上三下三布局

six1

    .s1 {
        flex-wrap: wrap;
        align-content: space-between;
    }

6.2 左三右三布局

six2

    .s2 {
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-between;
    }

7 九项目

html模版：

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

图：

image.png

样式：

    .n1 {
        flex-wrap: wrap;
    }

五、总结

使用flex布局很多情况下节省很多工作量，方便简单好用。特别手机端用的很多。

六、完整代码没上传GitHub，这儿随便写了下符在下面。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                background: black;
            }

            .con {
                margin: 50px;
                display: flex;
                flex-direction: row;
            }

            .box {
                width: 60px;
                height: 60px;
                border: 1px solid white;
                background: white;
                border-radius: 5px;
                display: flex;
                margin: 10px;
            }
            .item {
                width: 10px;
                height: 10px;
                background: black;
                border-radius: 5px;
                margin: 5px;
            }

            .box.one1 {
                flex-direction: row;
                justify-content: center;
            }
            .box.one2 {
                flex-direction: row;
                justify-content: flex-end;
            }
            .box.one3 {
                flex-direction: row;
                align-items: center;
            }
            .box.one4 {
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }
            .box.one5 {
                align-items: center;
                justify-content: flex-end;
            }
            .box.one6 {
                align-items: flex-end;
            }
            .box.one7 {
                align-items: flex-end;
                justify-content: center;
            }
            .box.one8 {
                align-items: flex-end;
                justify-content: flex-end;
            }

            .box.two1 {
                justify-content: space-between;
            }
            .box.two2 {
                flex-direction: column;
                justify-content: space-between;
            }
            .box.two21 {
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
            }
            .box.two22 {
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-end;
            }
            .box .item1 {
                align-self: center;
            }
            .box.two3 {
                justify-content: space-between;
            }
            .two3 .item:last-child {
                align-self: flex-end;
            }

            .t1 {
                flex-direction: column;
            }
            .t1 .item:nth-child(2) {
                align-self: center;
            }
            .t1 .item:nth-child(3) {
                align-self: flex-end;
            }
            .t2 {
                flex-direction: column;
                align-items: flex-end;
            }
            .t2 .item:nth-child(2) {
                align-self: center;
            }
            .t2 .item:nth-child(3) {
                align-self: flex-start;
            }

            .f1 {
                flex-wrap: wrap;
                justify-content: flex-end;
                align-content: space-between;
            }

            .f2 {
                flex-direction: column;
                justify-content: space-between;
            }
            .column {
                display: flex;
                justify-content: space-between;
            }
            .mid {
                align-items: center;
                justify-content: center;
            }

            .s1 {
                flex-wrap: wrap;
                align-content: space-between;
            }
            .s2 {
                flex-direction: column;
                flex-wrap: wrap;
                align-content: space-between;
            }

        </style>
    </head>

    <body>
    <!-- 1 -->
        <div class="con">
            <div class="box">
                <div class="item"></div>
            </div>

            <div class="box one1">
                <div class="item"></div>
            </div>
            <div class="box one2">
                <div class="item"></div>
            </div>
            <div class="box one3">
                <div class="item"></div>
            </div>
            <div class="box one4">
                <div class="item"></div>
            </div>
            <div class="box one5">
                <div class="item"></div>
            </div>
            <div class="box one6">
                <div class="item"></div>
            </div>
            <div class="box one7">
                <div class="item"></div>
            </div>
            <div class="box one8">
                <div class="item"></div>
            </div>
        </div>

    <!-- 2 -->
    <div class="con">
        <div class="box">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box two1">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box two2">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box two21">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box two22">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box">
            <div class="item"></div>
            <div class="item item1"></div>
        </div>
        <div class="box two3">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

    <!-- 3 -->
    <div class="con">
        <div class="box t1">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box t2">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

    <!-- 4、5 -->
    <div class="con">
        <div class="box f1">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box f2">
            <div class="column">
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div class="column">
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
        <div class="box f2">
            <div class="column">
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div class="column mid">
                <div class="item"></div>
            </div>
            <div class="column">
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
    </div>

    <!-- 6、9 -->
    <div class="con">
        <div class="box s1">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box s2">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box s1">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    </body>
    </html>

flex布局-概念及骰子布局

目录：

一、概念

二、flex容器的属性

1. flex-direction 决定主轴的方向

2. flex-wrap 项目是否排列在轴线上，是否换行属性

3. flex-flow:<flex-direction> <flex-wrap> flex-direction和flex-wrap的简写

4. justify-content 定义主轴上的对其方式

5. align-items 项目在交叉线上的对齐方式

6. align-content 多行对其，如果只有一行，不起作用

三、项目的属性

1. order定义项目的排列顺序，值越小越靠前，默认为0

2. flex-grow定义项目的放大比例，默认为0

3. flex-shrink定义项目的缩小比例，默认值为1。

4. flex-basis定义在分配空间之前，项目占主轴空间，默认值为auto。

5. flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

6. align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性, 默认值为auto。

四、flex布局实践（骰子布局）

1. 单项目

2. 双项目

3. 三项目

4. 四项目

5. 五项目

6. 六项目

7 九项目

五、总结

六、完整代码没上传GitHub，这儿随便写了下符在下面。

1. `order`定义项目的排列顺序，值越小越靠前，默认为0

2. `flex-grow`定义项目的放大比例，默认为0

3. `flex-shrink`定义项目的缩小比例，默认值为1。

4. `flex-basis`定义在分配空间之前，项目占主轴空间，默认值为auto。

5. `flex`属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

6. `align-self`属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性, 默认值为auto。