Xin's blog Xin's blog
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
    • 组件与插件
    • CSS扩展语言
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架面试题汇总
  • 基本面试题
  • 进阶面试题
  • 其它
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 前后端联调
  • mock.js
  • 奇技淫巧
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)

Xin

英雄可不能临阵脱逃啊~
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
    • 组件与插件
    • CSS扩展语言
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架面试题汇总
  • 基本面试题
  • 进阶面试题
  • 其它
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 前后端联调
  • mock.js
  • 奇技淫巧
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)
  • HTML

  • CSS

    • 知识点

    • 案例

      • flex布局案例-网格布局
        • 基础
        • 网格布局
        • 骰子
        • 输入框布局
        • 圣杯布局
      • flex 布局,让某个子元素靠右对齐
      • transform案例
      • 文字在一行或两行时超出显示省略号
      • CSS智慧阴影
      • css3渐变的使用
      • CSS3模糊的使用
      • 扫光特效
      • 「布局技巧」图片未加载前自动撑开元素高度
      • 水平垂直居中的几种方式-案例
      • 如何根据系统主题自动响应CSS深色模式
      • 「css技巧」使用hover和attr()定制悬浮提示
  • JavaScript

  • Vue

  • 组件与插件

  • css扩展语言

  • 学习笔记

  • 前端
  • CSS
  • 案例
xugaoyi
2019-12-25

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>
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

参考: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

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

# 输入框布局

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

<html>
  <div class="InputAddOn">
    <span class="InputAddOn-item">icon</span>
    <input class="InputAddOn-field" placeholder="input宽度自适应">
    <button class="InputAddOn-item">提交</button>
  </div>
  <br/>
  <div class="Media">
    <div class="Media-figure">左侧固定</div>
    <p class="Media-body">右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应右侧自适应</p>
  </div>
</html>
<style>
  .InputAddOn {
    display: flex;
  }
  .InputAddOn-field {
    flex: 1;
  }
  .Media {
    display: flex;
    align-items: flex-start;
  }
  .Media-figure {
    width: 100px;
    height: 100px;
    background: #eee;
    margin-right: 1em;
  }
  .Media-body {
    flex: 1;
  }
  /* 基础样式 */
  input:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  }
  input {
    outline-color: invert;
    outline-style: none;
    outline-width: 0px;
    text-shadow: none;
    -webkit-appearance: none;
    -webkit-user-select: text;
    outline-color: transparent;
    box-shadow: none;
  }
  .InputAddOn-item {
    width: 100px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #ccc;
    background: #eee
  }
  .InputAddOn-field {
    height: 30px;
    padding: 1px 6px;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
  }
</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

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

# 圣杯布局

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

<html>
  <div class="HolyGrail">
    <header>#header</header>
    <div class="wrap">
      <nav class="left">left 宽度固定200px</nav>
      <main class="content-wrap">center 宽度自适应</main>
      <aside class="right">right 宽度固定200px</aside>
    </div>
    <footer>#footer</footer>
  </div>
</html>
<style>
  .HolyGrail {
    text-align: center;
    display: flex;
    min-height: 40vh;
    flex-direction: column;
  }
  .HolyGrail .wrap {
    display: flex;
    flex: 1;
  }
  .HolyGrail .content-wrap {
    background: #eee;
    flex: 1;
  }
  .HolyGrail .left,.HolyGrail .right {
    background:lightgreen;
    flex: 0 0 200px;
  }
  .HolyGrail header,.HolyGrail footer{
    background:#999;
    height: 50px;
    line-height: 50px;
  }
  .HolyGrail .left {
    background:salmon;
  }
</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

参考:<http://www.ruanyifeng.com/blog/2015/07/flex-examples.

在GitHub上编辑 (opens new window)
#css
上次更新: 2/23/2022, 5:36:03 PM

← CSS-function汇总 flex 布局,让某个子元素靠右对齐→

最近更新
01
createElement函数创建虚拟DOM
05-26
02
clipboard 剪切板属性
05-26
03
vue的权限管理
05-16
更多文章>
Theme by Vdoing | Copyright © 2021-2022 Xin | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×