基本网格布局及回滚策略

来自马来工程师Hui Jing的博文。

优雅的回滚

使用@supports也就是特性查询,浏览器通过一个键值对的条件表达式来判断是否支持指定特性并执行相应的样式。

兼容性:


Can I Use css-featurequeries? Data on support for the css-featurequeries feature across the major browsers from caniuse.com.

可以明显的看出IE并不支持,不过没关系不支持的话会直接跳过@supports部分的语句。

例子:

1
2
3
4
5
6
7
8
main {
background-color: red;
}
@supports (display:grid) {
main {
background-color: green;
}
}

若浏览器支持grid布局,则main块的背景色为绿色,反之则为红色。

关于display属性

CSS Display Spec中的要点:

  • 浏览器绘制box模型
  • CSS生成box tree
  • 每个box表现为canvas中对应的元素
  • 对于每个元素,CSS会根据元素的display属性生成零个或多个box

display属性用于定义元素的display type,主要有以下两种类型:

  • inner display type,规定子box如何布局
  • outer display type,规定box本身如何布局

格式上下文(formatting context)是一些关联的box所在布局的环境,不同的格式上下文会使用不同的规则去布局它们的box。

HTML

示例中包含25个卡片,每个卡片中都包含一张图片、主标题和副标题,标题文本尺寸会根据元素的长度变化。

html代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<main class="grid">
<div class="grid__item">
<img class="card__img" src="images/image1.jpg">
<h2>Card title</h2>
<p>Because the card pattern is soooo popular right now...</p>
</div>
<div class="grid__item">
<img class="card__img" src="images/image2.jpg">
<h2>Card title</h2>
<p>Because the card pattern is soooo popular right now, but not all text are made the same</p>
</div>
<!-- And repeat the .grid__item another 23 times -->
</main>

布局方案

inline-block布局

首先使用的是兼容性较好的方案,可以兼容到IE8。

这里假设每个卡片为固定尺寸(比如20em),整体布局在视口中居中。

代码并不复杂,给布局容器设置display: inline-block,并在父元素上设置text-align进行居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
body {
text-align: center;
}
.grid {
display: inline-block;
}
.grid__item {
width: 20em;
display: inline-block;
vertical-align: top;
margin: 1em 0.5em;
text-align: left;
}

flex布局

由于弹性盒不能很好的模拟一个网格,无法原生的处理沟槽,因此需要将margin设为负值在每个item之间获取一些空间。(ps:没太理解。。)

由于在IE8上的justify-content: center存在bug,并且目前只有FireFox支持space-evenly,因此选择justify-content: space-around进行居中。

width: auto用来重置基础布局中应用的width值,margin: initial同理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@supports (display:flex) {
.grid {
display: flex;
flex-wrap: wrap;
margin: -1em 0 1em -0.5em;
justify-content: space-around;
}
.grid__item {
padding: 1em 0 0 0.5em;
flex: 1 0 20em;
max-width: 20em;
width: auto;
margin: initial;
}
}

grid布局

使用auto-fill模式自动填充,grid-gap来设置沟槽宽度。

1
2
3
4
5
6
7
8
9
10
11
12
13
@supports (display:grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
grid-gap: 0.5em;
margin: initial;
}
.grid__item {
padding: initial;
max-width: none;
}
}

参考

文章目录
  1. 1. 优雅的回滚
  2. 2. 关于display属性
  3. 3. HTML
  4. 4. 布局方案
    1. 4.1. inline-block布局
    2. 4.2. flex布局
    3. 4.3. grid布局
  5. 5. 参考
|