Flex 布局教程:实例篇

作者: 阮一峰

日期: 2015年7月14日

上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。

你会看到,不管是什么布局,Flex往往都可以几行命令搞定。

我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox

一、骰子的布局

骰子的一面,最多可以放置9个点。

下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。

如果不加说明,本节的HTML模板一律如下。


<div class="box">
  <span class="item"></span>
</div>

上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推。

1.1 单项目

首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了。


.box {
  display: flex;
}

设置项目的对齐方式,就能实现居中对齐和右对齐。


.box {
  display: flex;
  justify-content: center;
}


.box {
  display: flex;
  justify-content: flex-end;
}

设置交叉轴对齐方式,可以垂直移动主轴。


.box {
  display: flex;
  align-items: center;
}


.box {
  display: flex;
  justify-content: center;
  align-items: center;
}


.box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}


.box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

1.2 双项目


.box {
  display: flex;
  justify-content: space-between;
}


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


.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}


.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}


.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}


.box {
  display: flex;
  justify-content: space-between;
}

.item:nth-child(2) {
  align-self: flex-end;
}

1.3 三项目


.box {
  display: flex;
}

.item:nth-child(2) {
  align-self: center;
}

.item:nth-child(3) {
  align-self: flex-end;
}

1.4 四项目


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

HTML代码如下。


<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>

CSS代码如下。


.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}

1.5 六项目


.box {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}


.box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
}

HTML代码如下。


<div class="box">
  <div class="row">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="row">
    <span class="item"></span>
  </div>
  <div class="row">
     <span class="item"></span>
     <span class="item"></span>
  </div>
</div>

CSS代码如下。


.box {
  display: flex;
  flex-wrap: wrap;
}

.row{
  flex-basis: 100%;
  display:flex;
}

.row:nth-child(2){
  justify-content: center;
}

.row:nth-child(3){
  justify-content: space-between;
}

1.6 九项目


.box {
  display: flex;
  flex-wrap: wrap;
}

二、网格布局

2.1 基本网格布局

最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放。

HTML代码如下。


<div class="Grid">
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
</div>

CSS代码如下。


.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

2.2 百分比布局

某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。

HTML代码如下。


<div class="Grid">
  <div class="Grid-cell u-1of4">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell u-1of3">...</div>
</div>

.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%;
}

三、圣杯布局

圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。

HTML代码如下。


<body class="HolyGrail">
  <header>...</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
  <footer>...</footer>
</body>

CSS代码如下。


.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
}

如果是小屏幕,躯干的三栏自动变为垂直叠加。


@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

四、输入框的布局

我们常常需要在输入框的前方添加提示,后方添加按钮。

HTML代码如下。


<div class="InputAddOn">
  <span class="InputAddOn-item">...</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">...</button>
</div>

CSS代码如下。


.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
}

五、悬挂式布局

有时,主栏的左侧或右侧,需要添加一个图片栏。

HTML代码如下。


<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">...</p>
</div>

CSS代码如下。


.Media {
  display: flex;
  align-items: flex-start;
}

.Media-figure {
  margin-right: 1em;
}

.Media-body {
  flex: 1;
}

六、固定的底栏

有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。

HTML代码如下。


<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>

CSS代码如下。


.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

七,流式布局

每行的项目数固定,会自动分行。

CSS的写法。


.parent {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}

(完)

珠峰培训

简寻

留言(48条)

正想学这个,你就来了

这个感觉好有用啊!

非常感谢,尝试使用下。看样子能简化好多东西。

骰子应该是6点

里面这“vertical-align: center;”还有用么。

很好,很实用

太帅了!

很好很实用

引用Cola的发言:

里面这“vertical-align: center;”还有用么。

vertical-align 没有 center 的值,要给也只能给 middle。反正好像也没有用到。

赞,大爱这篇示例,原先感觉非常理解不了,看完后、、嘿嘿,真的理解大半了。。非常感谢

阮老师的文章就是干。

骰子这个例子很有意思,工作中很多场景都有骰子这个例子的应用。学习了~~!233333

引用Cheney的发言:

vertical-align 没有 center 的值,要给也只能给 middle。反正好像也没有用到。

codepen 的demo里面有这一句

对于兼容问题该如何处理呢?

关于四项目的第二个布局(四个角各一个点):
如果骰子的四个点大小变小,
flex-wrap;flex-basis:100%;
的解决方案会导致下方的两个点不会对齐在左下角右下角

原作者给的方案会好些:
.box {
display: flex;
justify-content: space-between;
}

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

display:flex现在应该是用兼容性的吧,在部分的安卓手机里面不好用,现在还在用display:box

有个项目就是用的display:-webkit-flex,然后使用overflow:scroll-y进行滚动,不过滚动效果远没有使用原生滚动好,不知道有没有什么其他比较好的解决方案。

非常感谢,最近正学习flex布局,写的很清楚。

非常棒的文章。以后做内容流时可以尝试使用~

CSS终于有了像样的自动布局了~

这么难懂的知识经过阮老师的讲解都变得如此简单,赞!阮老师的文笔真是厉害

纯干货 不错

不错,博主这图文并茂的 杠杠的

写的不错,赞一个!

学习了。

色子以下的网页布局部分说的很笼统啊,希望以后能再说的详细一点,谢谢啦

Visual Studio .Net 的布局方式, flex 能做到么
如一下两者格式,都要把主内容放在第一
树| 主内容
树|_______
树|底板

树| 主内容
__|_______
底板

阮老师的东西不错

谢谢楼主这么详细的教程
但是项目三是有点问题的,在容器上应该加上一个flex-direction:column的属性

.box {
display: flex;
flex-direction:column;
}

.item:nth-child(2) {
align-self: center;
}

.item:nth-child(3) {
align-self: flex-end;
}

引用前端菜鸟的发言:

display:flex现在应该是用兼容性的吧,在部分的安卓手机里面不好用,现在还在用display:box

觉得应该与时俱进,4.0安卓的用户都占据了97%以上了吧。还有2.x的,估计也是不怎么上网不怎么用手机的用户吧。所以可以放心大胆放心用。

太神了,写得很好,通俗易懂

骰子的布局,阮老师的从左到右排版,我学了一下,改成从上到下,哈哈,flex太好用了,http://codepen.io/anon/pen/qOywrB

在骰子的布局中的第四个项目中确定能达到像图中所示的吗,如果每个项目之间没有margin值,从主轴的右边对齐那不是第一行的三个点都要靠右吗,而不是每个都有间隔

我的代码设置成如下才能达到阮老师的效果

display: flex;
flex-wrap: wrap;
flex-direction:row-reverse;
justify-content:space-between;
align-content:space-between;

非常谢谢!你的文章对我很有帮助!:)

中间那个网格布局的百分比布局,是不是少啊了很多元素。css代码和html代码对不上号啊

是不是

justify-content: 还有等等……ie10 都不兼容的

很好用,使用之后发觉……兼容性堪忧啊,过段时间用就很好

不知道阮老师对flex在安卓的微信中的各种问题有什么建议,是换掉这种布局呢还是用各种兼容方法写。有类似的兼容性的文章吗

.Grid-cell2.u-1of3 {
flex: 1 0 33.3333%;
background-color:#7CFC00;
}

.Grid-cell2.u-1of4 {
flex: 1 0 25%;
background-color:#E74D3C;
}

如果flex的放大比例都为1的话,那它的宽度在什么基础上进行变化的啊?一直没搞懂这个

在UC浏览器下 不支持吧

请问下,第三个 圣杯布局,为什么css中要写很多个 flex:1

关于flex的2篇文章都看完了,但阮大神没有讲,flex与盒模型相比的最大优势在何处,以及为何在移动端要使用flex布局

学习了,非常详细易懂,适合入门!

flex:1的意思是什么?

非常感谢,很喜欢您的教程,发现1.3三项目少了.box{justify-content: space-between;},难道只有我一个人发现了...

这个是不是兼容性不算太好呀,只有chrome完全支持呀

"1.4 四项目"的代码有点问题,如果设置justify-content:flex-end的话,第一行的3个元素不会那么平均的分布的,而是挤在右边,像float:right似的

单项目中第五个,水平和垂直居中,父级设置display:flex;后,子元素设置margin:auto;应该是最简单的。我是在新书css揭秘上看的。具体的原理我还不太懂。

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接