css基础精华---Flex 布局教程：实例篇

转载地址：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

上一篇文章介绍了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;
}

（完）

文档信息

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
发表日期： 2015年7月14日
更多内容：档案 » 开发者手册
博客文集：《前方的路》，《未来世界的幸存者》
社交媒体： twitter， weibo
Feed订阅：

2017.08.17: 全文搜索引擎 ElasticSearch 入门教程

全文搜索属于最常见的需求，开源的 ElasticSearch （以下简称 Elastic）是目前全文搜索引擎的首选。
2017.07.29: 窗口管理器 xmonad 教程
开发者最需要的，就是一个顺手的开发环境。
2017.07.18: Pull Request 的命令行管理
Github 的一大特色就是 Pull Request 功能（简写为 PR）。
2017.06.22: HTML 自定义元素教程
组件是 Web 开发的方向，现在的热点是 JavaScript 组件，但是 HTML 组件未来可能更有希望。

广告（购买广告位）

留言（91条）

马甲嘎嘎说：

正想学这个，你就来了

2015年7月14日 19:38 | # | 引用

drunkevil 说：

这个感觉好有用啊！

2015年7月14日 21:16 | # | 引用

stonex 说：

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

2015年7月15日 10:18 | # | 引用

session 说：

骰子应该是6点

2015年7月15日 14:02 | # | 引用

Cola 说：

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

2015年7月15日 15:52 | # | 引用

yujieyu7 说：

很好，很实用

2015年7月15日 16:55 | # | 引用

clover 说：

太帅了！

2015年7月15日 18:12 | # | 引用

chshouyu 说：

很好很实用

2015年7月15日 19:24 | # | 引用

Cheney 说：

引用Cola的发言：
里面这“vertical-align: center;”还有用么。

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

2015年7月16日 09:58 | # | 引用

msisliao 说：

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

2015年7月16日 11:04 | # | 引用

张杨说：

阮老师的文章就是干。

2015年7月16日 11:33 | # | 引用

outlaws 说：

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

2015年7月16日 16:25 | # | 引用

Cola 说：

引用Cheney的发言：
vertical-align 没有 center 的值，要给也只能给 middle。反正好像也没有用到。

codepen 的demo里面有这一句

2015年7月22日 10:54 | # | 引用

megasu@qq.com 说：

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

2015年7月25日 14:45 | # | 引用

bolo 说：

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

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

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

2015年7月26日 12:59 | # | 引用

前端菜鸟说：

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

2015年7月28日 14:48 | # | 引用

听雨剑主说：

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

2015年8月 4日 16:38 | # | 引用

Jolson 说：

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

2015年8月 5日 21:01 | # | 引用

Brant 说：

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

2015年8月 8日 21:45 | # | 引用

joker 说：

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

2015年8月21日 14:06 | # | 引用

weager 说：

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

2015年8月23日 12:58 | # | 引用

吴聊说：

纯干货不错

2015年8月26日 10:36 | # | 引用

大叔说：

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

2015年9月 8日 19:46 | # | 引用

小松鼠说：

写的不错，赞一个！

2015年9月17日 12:10 | # | 引用

davidchen 说：

学习了。

2015年9月18日 10:58 | # | 引用

shenger 说：

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

2015年9月19日 09:58 | # | 引用

dvaknheo 说：

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

树| 主内容
__|_______
底板

2015年9月28日 10:42 | # | 引用

Zaki 说：

阮老师的东西不错

2015年10月21日 14:23 | # | 引用

george.hu 说：

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

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

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

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

2015年10月28日 22:12 | # | 引用

fonglezen 说：

引用前端菜鸟的发言：
display:flex现在应该是用兼容性的吧，在部分的安卓手机里面不好用，现在还在用display：box

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

2015年10月29日 11:00 | # | 引用

yooly 说：

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

2015年11月 4日 14:48 | # | 引用

yooly 说：

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

2015年11月 4日 15:23 | # | 引用

phc 说：

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

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

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

2015年11月 6日 10:08 | # | 引用

Biox 说：

非常谢谢！你的文章对我很有帮助！：）

2015年11月 6日 11:10 | # | 引用

unclefeng 说：

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

2015年11月14日 19:39 | # | 引用

phc 说：

是不是

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

2015年11月21日 11:09 | # | 引用

tommyfok 说：

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

2015年12月13日 17:26 | # | 引用

之一说：

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

2015年12月14日 18:29 | # | 引用

小房子说：

.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的话，那它的宽度在什么基础上进行变化的啊？一直没搞懂这个

2016年1月26日 15:42 | # | 引用

yunxi 说：

在UC浏览器下不支持吧

2016年1月30日 23:46 | # | 引用

奈何说：

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

2016年2月16日 17:45 | # | 引用

奈何说：

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

2016年2月16日 18:18 | # | 引用

响应式初学者1 说：

学习了，非常详细易懂，适合入门！

2016年2月17日 10:37 | # | 引用

shangga 说：

flex:1的意思是什么？

2016年4月 7日 16:25 | # | 引用

小静说：

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

2016年4月10日 13:54 | # | 引用

Helios 说：

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

2016年4月12日 21:36 | # | 引用

汤米说：

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

2016年4月22日 10:59 | # | 引用

张阳说：

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

2016年5月25日 18:16 | # | 引用

Eliza 说：

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

2016年6月 7日 11:10 | # | 引用

cody 说：

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

他自己开篇就说了= =

2016年6月14日 16:00 | # | 引用

开源无憾说：

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

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

2016年6月19日 12:21 | # | 引用

Ella 说：

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

2016年6月19日 16:08 | # | 引用

王冬说：

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

2016年6月24日 11:53 | # | 引用

军说：

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

2016年7月 1日 11:30 | # | 引用

happyyyhy 说：

膜拜大牛

2016年8月 2日 15:39 | # | 引用

tolerious 说：

引用session的发言：
骰子应该是6点

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

2016年9月13日 10:14 | # | 引用

Wgggg 说：

圣杯布局,IE11完全乱掉了

2016年9月20日 13:14 | # | 引用

韩辉说：

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

2016年9月23日 15:22 | # | 引用

deg 说：

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

2016年10月29日 10:47 | # | 引用

ben 说：

收获很大，感谢

2016年10月29日 20:03 | # | 引用

德芙小猪说：

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

2016年11月 3日 09:42 | # | 引用

德芙小猪说：

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

2016年11月 3日 10:38 | # | 引用

夏夜星空说：

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

2016年11月 7日 15:53 | # | 引用

FLEX布局说：

非常给力，感谢！

2016年11月28日 10:49 | # | 引用

coderfoobar 说：

引用tolerious的发言：
不不不，阮老师的意思应该是最多可以放九点，哈哈。

那还是麻将九饼吧

2016年12月15日 14:54 | # | 引用

Dreambuild2021 说：

受益匪浅,豁然开朗!

2016年12月21日 18:48 | # | 引用

koz 说：

1.2那
.box {
display: flex;
}

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

2016年12月27日 00:08 | # | 引用

前端爱好者说：

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

2017年1月10日 15:22 | # | 引用

昭说：

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

2017年1月12日 18:22 | # | 引用

不再犹豫说：

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

2017年1月14日 18:47 | # | 引用

高大磊说：

多谢，看过最好的博客

2017年2月12日 15:50 | # | 引用

刘继伟说：

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

2017年2月19日 13:54 | # | 引用

losymear 说：

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

2017年2月19日 15:03 | # | 引用

jeremy 说：

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

2017年2月27日 22:26 | # | 引用

33 说：

flex-basis: 100%有什么用

2017年3月 1日 15:43 | # | 引用

24 说：

flex: 1是什么哪个属性

2017年3月 1日 15:49 | # | 引用

哈喽基地说：

引用不再犹豫的发言：
flex布局怎样设置单个子项在主轴上的位置？

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

2017年3月14日 10:53 | # | 引用

辣牛说：

引用Cola的发言：
里面这“vertical-align: center;”还有用么。

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

2017年3月17日 17:36 | # | 引用

赵瑞说：

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

2017年3月18日 21:12 | # | 引用

webkws 说：

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

flex:1 => 1 1 0

2017年4月15日 22:22 | # | 引用

季一辉说：

引用koz的发言：
1.2那
.box {
display: flex;
}

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

2017年4月18日 13:23 | # | 引用

王先森说：

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

2017年4月25日 11:55 | # | 引用

dady 说：

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

2017年5月 2日 13:25 | # | 引用

捍卫者说：

谢谢，好文章，学习啦，简单易懂！

2017年5月 6日 15:28 | # | 引用

左蓝说：

@phc：

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

2017年5月18日 14:03 | # | 引用

tinywenwen 说：

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

2017年5月23日 16:29 | # | 引用

石心说：

引用季一辉的发言：
我试了也不行，是不是作者代码没有给全

2017年6月14日 17:05 | # | 引用

jmcheng 说：

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

2017年6月15日 11:06 | # | 引用

HYZT 说：

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

2017年6月16日 19:41 | # | 引用

xiaoyujia 说：

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

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

2017年6月16日 23:48 | # | 引用

雨枫说：

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