flex布局-概念及骰子布局

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

目录：

• 1. 概念
• 2. 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
• 3. 项目的属性
  • 3.1. order
  • 3.2. flex-grow
  • 3.3. flex-shrink
  • 3.4. flex-basis
  • 3.5. flex
  • 3.6. align-self
• 4. flex布局实践（骰子布局）
• 5. 总结
• 6. 源码

---

---

一、概念

      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的简写

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: ;
}

order

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

.item {
     flex-grow: ;
}

flex-grow

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

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

.item {
    flex-shrink: ;
}

flex-shrink

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

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

.item {
    flex-basis: | 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默认为

.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模版为

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 左上右下布局

b5

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

3. 三项目

html模版

3.1 一左二中三右布局

t1

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

3.2 一右二中三左布局

t2

    .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 第一排铺满，最后一排右布局
模版：

图：

f1

样式：

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

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

图：

image.png

样式：

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

5. 五项目

html模版：

图：

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模版：

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模版：

图：

image.png

样式：

    .n1 {
        flex-wrap: wrap;
    }

五、总结

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

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