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

(完)

留言(140条)

正想学这个,你就来了

这个感觉好有用啊!

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

骰子应该是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揭秘上看的。具体的原理我还不太懂。

我只想说阮老师这篇大部分是抄的
https://philipwalton.github.io/solved-by-flexbox/

引用Eliza的发言:

我只想说阮老师这篇大部分是抄的
https://philipwalton.github.io/solved-by-flexbox/

他自己开篇就说了= =

引用Eliza的发言:

我只想说阮老师这篇大部分是抄的
https://philipwalton.github.io/solved-by-flexbox/

黑的毫无水平,按你这个思路,所有这类文章都是“抄”的CSS官方文档。

赞,筛子布局非常易懂。实际示例开发过程中非常常见,很实用。
干货!很喜欢阮老师写作的风格

太厉害了,就连菜鸟教程的flex教程都是转自这里的。
http://www.runoob.com/w3cnote/flex-grammar.html

项目1.3是错的,这样写样式不能是截图上面的。
flex-direction: column;justify-content: space-between;
box得加上这两条属性

膜拜大牛

引用session的发言:

骰子应该是6点

不不不, 阮老师的意思应该是最多可以放九点,哈哈。

圣杯布局,IE11完全乱掉了

阮老师,我想问一下。flex布局中,各个item之间的间距是如何设置的呢?用margin可以做到,但是面试的时候面试官说不用margin也可以。不是很理解。我看到的flex布局都是item连接到一起的。

flex布局能不能实现这样的效果:容器内的项目固定宽高,设备宽度减小,项目自动换行,换行之后内容部分整体保持水平居中,同时保持项目七的流式布局?能的话改如何实现?

收获很大,感谢

非常好的教程。看了受益匪浅。

全部看明白了,感觉收获很大。

厉害啊,写的很精简,没有多少废话。赞

非常给力,感谢!

引用tolerious的发言:

不不不, 阮老师的意思应该是最多可以放九点,哈哈。

那还是麻将九饼吧

受益匪浅,豁然开朗!

1.2那
.box {
display: flex;
}

.item:nth-child(2) {
align-self: center;
}
这个错了,得不到图中的效果。

属性是好属性,但是兼容性还是不怎么好,IE和一票国产移动端浏览器就坑死了

悬挂布局里面的基本栗子里面第三个块怎么能紧接着在第一个块的下面,而不受第二个块的高度影响

flex布局怎样设置单个子项在主轴上的位置?

多谢,看过最好的博客

感谢!非常感谢!不敢碰触的问题,在研究了一天后,就豁然开朗了。知识分享者,赞!我也会去教更多的人掌握flex技能。

圣杯布局的header,
footer {
flex: 1;
}
大了些吧 flex:0.3这样

看了这个,瞬间觉得 flex 要颠覆以前小心谨慎的display+float布局啊啊啊

flex-basis: 100%有什么用

flex: 1是什么哪个属性

引用不再犹豫的发言:

flex布局怎样设置单个子项在主轴上的位置?

我也有在想呢,有时候需要将子项设置在位置,特别是需要按某个比例。

引用Cola的发言:

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

设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

一个点的时候,只设置.box {display:flex} 是不行的,因为父元素的align-items默认值为stretch,会使子元素的高度充满整个容器,而不是在左上角。所以应该还要给.box加上align-items: flex-start;

.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}

flex:1 => 1 1 0

引用koz的发言:

1.2那
.box {
display: flex;
}

.item:nth-child(2) {
align-self: center;
}
这个错了,得不到图中的效果。

非常实用 谢谢老师 跟着学习了一遍 让我对布局更加深入了

1.5第三个少了:
.row:nth-child(1){
justify-content: space-between;
}

谢谢,好文章,学习啦,简单易懂!

@phc:

对的,我也是亲自写了一遍才感觉这里阮老师写得达不到效果

flex: 0 0 25%;
这是多个属性连用吗?分别是什么属性?

引用季一辉的发言:

我试了也不行,是不是作者代码没有给全

五、悬挂式布局 那里的效果是怎样实现的呢?感觉像瀑布流的布局

阮老师的文章就是鞭辟入里,精炼而不冗杂,膜拜大神了,有些刚好有用

色子布局中两个点的项目中的倒数第二个:一个点在正中间另一个点在左上角那个布局不对吧?
.box {
display: flex;
}

.item:nth-child(2) {
align-self: center;
}
这样写并不能保证到达效果,当外层盒子的尺寸变大时候,正中间的那个点就偏离中心位置了,图例中的‘视觉居中’是色子的尺寸和点的尺寸凑巧的结果吧

后面的例子父元素的宽度是怎么设置的?

初学,目前骰子项目里有的无法实现,比如二项目倒数第二个,三项目第一个,四项目第一个,九项目

从来都是抵触写css的,自从看到flex后,才发现原来布局也挺有意思的

现在刚开始接触微信小程序,原来是做安卓的,看新程序十分蒙蔽,不懂布局,看完这个信心大增啊

1.4 四项目 第一个是错的,您那种写法写出来上面三个是挨在一起的,我修改了一下应该是
.boxFlex15 {
justify-content:space-between;
flex-direction: row-reverse;
}

.boxFlex15 .item:last-child {
align-self: flex-end;
}

2.1 基本网格布局 的代码是不是省略了很多,不可能实现缩略图的效果啊,我自己改写了一份,不知道能不能这么写
.Grid {
width: 950px;
height: 460px;
background: #fff;
border: 5px solid #e0e0e0;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
}
.Grid-cell {
background: #f4f4f4;
border-radius: 10px;
margin: 1.5%;
}
.Grid-cell:nth-child(1),
.Grid-cell:nth-child(2),
.Grid-cell:nth-child(10),
.Grid-cell:nth-child(11) {
flex: 0 47%;
}
.Grid-cell:nth-child(3),
.Grid-cell:nth-child(4),
.Grid-cell:nth-child(5) {
flex: 0 30.3%;
}
.Grid-cell:nth-child(6),
.Grid-cell:nth-child(7),
.Grid-cell:nth-child(8),
.Grid-cell:nth-child(9) {
flex: 0 22%;
}

收益匪浅,以前布局没考虑这么多

第一次留言,感谢阮老师,让我们学到了很多东西!

三个点的那个box上少了justify-content: space-between;



这样的情况多加了一个类名,在浏览器不能正确的显示,这是为什么啊

1.4 四項目的第一張圖 實現代碼沒看懂 我用了兩個div 第二個div寫了flex-direction:row-reverse,才實現。
文章寫的很細緻看兩遍 寫個筆記就記住基本的應用了 謝謝!

引用shangga的发言:

flex:1的意思是什么?

flex-grow:1;
flex-shrink:1;
flex-basis:100%;

感觉圣杯布局那个,不用order属性更方便,直接按照正常的顺序写就好了。

引用军的发言:

项目1.3是错的,这样写样式不能是截图上面的。
flex-direction: column;justify-content: space-between;
box得加上这两条属性

引用feline的发言:

感觉圣杯布局那个,不用order属性更方便,直接按照正常的顺序写就好了。

这是为了SEO,重要的东西写在前面永远是有利于搜索引擎的。

想请教一个问题,五、悬挂式布局这个例子中 前两个小栏目在左侧,一个大栏目在右侧,这样的布局也可以用flex实现吗

求教,例子中骰子两个的布局(左上和右下分别两个),如果第一个黑点在右上,第2个黑点在左下,怎么写CSS?
好像很难啊

引用成东的发言:

求教,例子中骰子两个的布局(左上和右下分别两个),如果第一个黑点在右上,第2个黑点在左下,怎么写CSS?
好像很难啊

这样:

.box {
diplay: flex;
justify-content: space-between;
}
.item:nth-child(1){
align-self: flex-end;
}

好文章值得反复阅读

用了好久的传统布局,也简单学习过flex,这次照着实例做了一遍后,我都快感动哭了,Flex布局太好用了,特别是flex: 0 0 100%;这个属性太美好了,跟吃到了特级厨师的顶级料理一样。。。。

不错!学习了!!

666 解决了好多布局问题 在也不用担心花时间在布局上了

这个可太经典了

求教,1.4 四项目,4个点可以不用分开div吗?直接分为两行,css怎么写?拜托拜托

一个点在垂直居中使用align-items: center;时,需要添加一个高度才有效果。
.box {
display: flex;
align-items: center;
height: 100%;
}

1.3 三项目
是不是有些问题呀
.box {
display: flex;
}

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

.item:nth-child(3) {
align-self: flex-end;
}
.box是不是还需要加一个justify-content:space-around;如果不加的话 ;这样能成立,只能是三个点大小一致,而且容器的大小能刚刚好容纳这三个点

引用shangga的发言:

flex:1的意思是什么?

子元素在父元素中均分宽度,与自己的宽度无关了

emmmmm。。。。。为什么没有点赞

还是阮老师的文章讲的清楚。赞。

讲的非常透彻,图文条理非常清晰。学习了,太感谢分享了。

之前偷懒只看了第一篇就觉的满足了,这回看了一下第二篇,又收获许多。

看了下MDN,flex:auto;代表flex:1 1 auto;按照之前的理解,应该代表0 1 auto才是,感觉这么搞,可读性不好,规则越来越多了。

建议实例中的...可以换成具体的名字或是加个背景色

@xiaoyujia:

我试了下两点布局第二个点不能居中

看到博客园有篇文章明明就是抄袭阮一峰大神的,不标明原文转载,还说自己是原创,说撒子都是参考别人的,但是相似度高达99.9%,连所有内容标点符号都一样,就是换汤不换也已,真是从未见过如此厚颜无耻之人,链接如下,

我绝对没有胡编乱造,https://www.cnblogs.com/sqyambition/p/9254648.html

群众的眼睛是雪亮的

厉害了,阮老师,一篇好的文章不单单是内容满是干活,更重要的是还能够通俗而又清晰的讲述出来。这一点阮老师真的是厉害????

晕,IPHONE的设计师肯定很早就看过你博客了

除了圣杯布局还有别的常用布局吗?可不可以推荐一本css+html的书籍

凌晨看完你的文章,收货满满,很感谢

很好的文章,每次忘记了都是过来看

在写四点的时候,我认为那一个column应该写成row比较好。

有的地方根本不正确

我是宇康同志,我觉得里面有地方是出错了的,我照着打效果不行,我自己改了之后才可以的,希望你能认识到自己的错误然后改正!

请问输入框布局中InputAddOn-item的样式是什么?

引用吴和轩的发言:

请问输入框布局中InputAddOn-item的样式是什么?

不定宽 由内部图片撑起整个样式。

无法点赞我就很气

@小房子:

放大比例是按剩余空间进行分配的 u-1of3占了33.3333% u-1of4占了25% 先算他们的实际占用大小 再把剩余空间进行分配 u-1of3比u-1of4还是8.3333%

敲一敲,依然收获很大阮一峰,永远滴神

流式布局的缺陷是每个项目必须都是同等尺寸是吗

最后一个,如果相邻item间有间隔,但边上没有间隔。这个实现就弄不成

我愿称其为flex布局最强教程!有图有文字还有代码可以自己演示

阮老师,文档中demo的链接地址打不开了,求修复

我要发表看法

«-必填

«-必填,不公开

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