flex布局案例-网格布局

# 基础

可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。

<html>
  <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
  </div>
</html>
<style>
/* 父元素上定义弹性盒模型，称之为 “容器” */
.box{
  width: 350px;
  height: 300px;
  background: #eee;
  /* 基本概念：.box为容器，.box下的span为项目；.box的x轴为主轴，y轴为交叉轴 */
  /* flex 定义为弹性盒模型 */
  display: flex;
  /*flex-direction 排列方向： row 行（默认） | row-reverse 行-反转  | column 列 | column-reverse 列-反转 */
  flex-direction: row; 
  /*flex-wrap 是否换行： nowrap 不换行（默认，可能会压缩项目宽度） | wrap 换行 | wrap-reverse 换行-反转，第一行在下方 */
  flex-wrap: wrap;
  /* flex-flow  方向和换行的简写：默认值为row nowrap，方向 和 是否换行 的取值 */
  flex-flow: row wrap;
  /* justify-content 项目在主轴上的对齐方式: flex-start 左对齐（默认） | flex-end 右对齐 | center 居中 | space-between 两端对齐 | space-around 项目两侧的间隔相等*/
  justify-content: space-around;
  /* align-items 项目在交叉轴上的对齐方式：stretch（默认）伸展，如果项目未设置高度或设为auto，将占满整个容器的高度 | 
  flex-start 交叉轴的起点对齐 | flex-end 交叉轴的终点对齐 | center 交叉轴的中心点对齐 | baseline 项目的第一行文字的基线对齐（适用于每个项目高度不一致，以项目中的文字为基准对齐） */
  align-items: center
  /* align-content 多根轴线的对齐方式（一排项目为一根轴线，只有一根轴线时此样式不起作用）: 
  stretch（默认）伸展，轴线占满整个交叉轴 | flex-start 容器顶部对齐 | flex-end 容器底部对齐 | center 与交叉轴的中点对齐 |
  space-between 与交叉轴两端对齐，轴线之间的间隔平均分布| space-around 每根轴线两侧的间隔都相等*/
  align-content：flex-start
  /* 代码单词中文含义 ：
  flex 弹性； direction 方向； wrap 外套、包； flow 流动
  justify 对齐； content 内容；space 空间、距离；between 在...之间；around 周围的
  align 排列；stretch 伸展；
  */
}
/* 子元素称之为 “项目” */
.box span{
  display:block;width: 50px;height: 50px;background: mediumspringgreen;margin: 10px;text-align: center;line-height: 50px;
  /* flex-grow 项目的放大比例，默认为0，即如果存在剩余空间，也不放大;
  如果所有为1时，则它们将等分剩余空间（如果有的话）。
  如果其中一个项目为2，其他项目都为1，则为2的占据的剩余空间将比其他项多一倍。
  */
  flex-grow: 0; /* grow 扩大 */
  /* flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 
  如果所有项目都为1，当空间不足时，都将等比例缩小。
  如果其中一个项目为0，其他项目都为1，则空间不足时，为0的不缩小*/
  flex-shrink: 1; /* shrink 缩小 */
  /* flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（宽度）。
  浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小。
  它可以设为跟`width`或`height`属性一样的值（比如50px），则项目将占据固定空间*/
  flex-basis: auto; /* basis 基础 */
  /* flex属性是flex-grow,flex-shrink 和 flex-basis的简写，默认值为`0 1 auto`。后两个属性可选。
  该属性有两个快捷值：auto (1 1 auto)，即放大 和 none (0 0 auto)，即缩小。
  建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。*/
  flex:0 1 auto; /* flex: 0放大 1缩小 auto原本宽度*/
}
.box span:nth-child(2){
  /* order 项目的排列顺序。数值越小，排列越靠前，默认为0 ; 取值：正负整数。*/
  order: -1;
  background: red;
}
.box span:nth-child(7){
  /* align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
  默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
  取值：auto（默认） | flex-start | flex-end | center | baseline | stretch。
  */
  align-self: flex-end;
  background: blue;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html (opens new window)

# 网格布局

可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。

<html>
  <div class="grid">
    <div class="grid-cell">1/2</div>
    <div class="grid-cell">1/2</div>
  </div>

  <div class="grid">
    <div class="grid-cell">1/3</div>
    <div class="grid-cell">1/3</div>
    <div class="grid-cell">1/3</div>
  </div>

  <div class="grid">
    <div class="grid-cell">1/4</div>
    <div class="grid-cell">1/4</div>
    <div class="grid-cell">1/4</div>
    <div class="grid-cell">1/4</div>
  </div>

  <div class="grid text">
    <div class="grid-cell">
      高度会跟随右侧元素变化
    </div>
    <div class="grid-cell">
      内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充
    </div>
  </div>

  <h4>某个网格设置百分比宽度</h4>
  <div class="grid">
      <div class="grid-cell u-full">100%</div>
  </div>
  <div class="grid">
      <div class="grid-cell u-1of2">50%</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
  </div>
  <div class="grid">
      <div class="grid-cell u-1of3">33.33%</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
  </div>
  <div class="grid">
      <div class="grid-cell u-1of4">25%</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell">auto</div>
  </div>
</html>
<style>
  .grid {
    display: flex;
  }
  .grid-cell {
    flex: 1;
  }
  .grid-cell.u-full {
    flex: 0 0 100%;
  }
  .grid-cell.u-1of2 {
    flex: 0 0 50%;
  }
  .grid-cell.u-1of3 {
    flex: 0 0 33.3333%;
  }
  .grid-cell.u-1of4 {
    flex: 0 0 25%;
  }
  /* 基础样式 */
  .grid-cell {
    background: #eee;
    text-align: center;
    margin: 5px;
    padding: 10px 0;
  }
  .text .grid-cell {
    text-align: left
  }
</style>

参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html (opens new window)

# 骰子

可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。

<html>
  <div class="box2">
    <div class="first-face">
      <span class="pip"></span>
    </div>
    <div class="second-face">
      <span class="pip"></span>
      <span class="pip"></span>
    </div>
    <div class="third-face">
      <span class="pip"></span>
      <span class="pip"></span>
      <span class="pip"></span>
    </div>
    <div class="fourth-face">
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
    </div>
    <div class="fifth-face">
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
      <div class="column">
        <span class="pip"></span>
      </div>
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
    </div>
    <div class="sixth-face">
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
      <div class="column">
        <span class="pip"></span>
        <span class="pip"></span>
        <span class="pip"></span>
      </div>
    </div>
  </div>
</html>
<style>
  /* 一 */
  .first-face { /* 形成上下左右居中 */
    display: flex;
    /* 项目在主轴上居中 */
    justify-content: center;
    /* 项目在交叉轴上居中 */
    align-items: center;
  }
  /* 二 */
  .second-face {
    display: flex;
    /* 两侧对齐 */
    justify-content: space-between;
  }
  .second-face .pip:nth-of-type(2) {
    /* 居下 */
    align-self: flex-end;
  }/* 三 */
  .third-face {
    display: flex;
    /* 两侧对齐 */
    justify-content: space-between;
  }
  .third-face .pip:nth-of-type(2) {
    /* 居中 */
    align-self: center;
  }
  .third-face .pip:nth-of-type(3) {
    /* 居下 */
    align-self: flex-end;
  }
  /* 四 、六*/
  .fourth-face,
  .sixth-face {
    display: flex;
    /* 两侧对齐 */
    justify-content: space-between;
  }
  .fourth-face .column,
  .sixth-face .column {
    display: flex;
    /* 纵向排列 */
    flex-direction: column;
    /* 两侧对齐 */
    justify-content: space-between;
  }
  /* 五 */
  .fifth-face {
    display: flex;
    /* 两侧对齐 */
    justify-content: space-between;
  }
  .fifth-face .column {
    display: flex;
    /* 纵向排列 */
    flex-direction: column;
    /* 两侧对齐 */
    justify-content: space-between;
  }
  .fifth-face .column:nth-of-type(2) {
    /* 居中对齐 */
    justify-content: center;
  }
/* 基础样式 */
.box2 {
  display: flex;
  /* 项目在交叉轴上居中 */
  align-items: center;
  /* 项目在主轴上居中 */
  justify-content: center;
  vertical-align: center;
  /* 允许项目换行 */
  flex-wrap: wrap;  /* 项目是多行时以交叉轴中心对齐 */
  align-content: center;
  font-family: 'Open Sans', sans-serif;
}
/* 类名包含face的元素 */
[class$="face"] {
  margin: 5px;
  padding: 4px;  background-color: #e7e7e7;
  width: 104px;
  height: 104px;
  object-fit: contain;  box-shadow:
    inset 0 5px white,
    inset 0 -5px #bbb,
    inset 5px 0 #d7d7d7,
    inset -5px 0 #d7d7d7;  border-radius: 10%;
}
.pip {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 4px;  background-color: #333;
  box-shadow: inset 0 3px #111, inset 0 -3px #555;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149