当前位置主页 > 资料库 > 前端教程 > 使用Flexbox打造响应式网页网格布局

使用Flexbox打造响应式网页网格布局

2015-04-01

查看演示 下载地址

CSS3Flexbox可以非常容易的制作出各种布局效果。前面我们已经结束了flexbox的基本使用方法,水平布局垂直布局方法。这篇文章我们来看看如果制作具有响应式效果的flexbox双列网格布局效果。

这种网格布局可以使用多种CSS技术来实现:display: table-cellinline-block,甚至是float。但是对于最新版本的现代浏览器来说,使用flexbox来实现是最简单的方法。

Flexbox网格布局的HTML代码

使用Flexbox来构建网格布局的最大优点是HTML结构代码十分简单。下面的代码只展示了一行两个网格的代码,使用一个<div>作为包裹元素,里面使用<figure>来制作网格。

<div id="got-gridbox">
  <figure>
    <img src="1.png" alt="...">
    <figcaption>Daenerys Targaryen</figcaption>
  </figure>
  <figure>
  <img src="2.png" alt="...">
  <figcaption>Tyrion Lannister</figcaption>
  </figure>
  …
</div>                              
                            
Flexbox网格布局的CSS样式

Flexbox布局样式一开始,首先要设置包裹divdisplay: flex,并使用justify-content属性来分离它里面的所有元素。网格的行使用flex-flow: row-wrap来创建。通用符下的box-sizing: border-box;属性是为了修补在<figure>元素添加边框(border)的时候产生的奇怪问题。这句代码通常可以写在CSS RESTES重置样式文件中。

* { box-sizing: border-box; }
#got-gridbox {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}                              
                            

注意代码中没有使用浏览器厂商的前缀。大多数现代浏览器在使用flexbox的时候都不需要使用前缀,但是 Safari 浏览器有点与众不同,它需要前缀的支持。

接下来,要给<figure>元素添加一些样式:

#got-gridbox figure {
  border: 1px solid #333;
  position: relative;
  font-size: 0;
  margin: 2% 0;
  flex: 0 0 48%;
}                              
                            

position: relative是为了可以将图片的标题以绝对定位的方式放置在<figure>中。每个<figure>元素是它的父容器宽度的48%,它们的水平间距为父容器宽度的4%。上下的间距使用margin属性来设定,为父容器高度的2%。这样每一个<figure>元素的上下间距加起来就是4%。如果设置为flex: 0 0 50%,不设置margin,会得到没有间距的两列网格布局。

接下来要将每个<figure>元素中的图片元素制作为响应式的。

#got-gridbox figure img { width: 60%; height: auto; margin-top: -2rem; }                              
                            

每一张图片都是宽度相同的PNG图片,它们会以正确的方式来填充<figure>元素。上面的代码还是用了负的margin-top属性来使图片往上超出一些<figure>元素。因为是PNG图片所以透明像素的部分会显示出<figure>的边框来。

唯一要注意的一点是右边的图片要有浮动:

#got-gridbox figure:nth-child(even) img { float: right; }                              
                            

在左边列,<figcaption>定位在<figure>元素的右边。

#got-gridbox figure figcaption {
  position: absolute; 
  right: 4%;
  top: 5%;
  font-family: Deseret, Trajan Pro, Trajan, Requiem, serif;
  text-transform: uppercase;
  font-size: 1.6rem; text-align: right;
}                              
                            

右边列的<figcaption>则定位在<figure>元素的左边。

#got-gridbox figure:nth-child(even) figcaption {
  left: 4%; right: auto; text-align: left;
}                              
                            

你要注意:flexbox天生就是具有响应式效果,这里的CSS只是用来设置文字和图片的响应式效果。

Black and white image of Cersei Lannister before alpha masking, showing table on bottom edge

最后两个网格有一些不同,它们里面又是两个水平的网格。为达到这种效果,一些朋友可能会添加额外的class,我们这里使用了一种简洁的方法,使用 CSS linear gradient(线性渐变)来制作。使用nth-last-child来选择最后两个元素,然后为它们添加线性渐变:

#got-gridbox figure:nth-last-child(-n+2) {
  background-image: linear-gradient(transparent, transparent 80%, #111 81%);
}                              
                            

最后,使用media screen来响应各种尺寸的屏幕显示:

@media screen and (max-width: 900px) {
  #got-gridbox figure figcaption { font-size: 1.4rem; }
}
@media screen and (max-width: 800px) {
  #got-gridbox figure figcaption { font-size: 1.25rem; }
}                              
                            

当然,文本可以使用vw来作为单位,和@media queries配合来设置文字的尺寸上限和下限。

在750像素宽的时候,布局变为一列布局,每一个<figure>元素水平宽度都变为100%。

@media screen and (max-width: 750px) {
  #got-gridbox figure { flex: 0 0 100%; margin-bottom: 7%; }
  #got-gridbox figure figcaption { font-size: 1.6rem;
}
}
@media screen and (max-width: 450px) {
  #got-gridbox figure figcaption { font-size: 1.2rem; width: 50%; }
}                              
                            

到此,所有的工作都完成了。可以看到,使用flexbox制作网格布局是非常简单的事情。

查看演示 下载地址

Previous:
上一篇:CSS3 flexbox使用指南(二)-- 垂直布局
Next:
下一篇:Flexbox使用向导-深入理解flex属性
返回顶部