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

（完）

2024.09.11: 白话多集群：工具和应用助手
一、引言上周，我参加了腾讯全球数字生态大会。今天，就跟大家分享，我的一点收获，就是理解了多集群工具。
2024.07.03: AI 编程助手测评：GitHub Copilot vs 豆包 MarsCode
一、引言 AI 怎么用于编程？
2024.05.29: 分布式数据库入门：以国产数据库 TDSQL 为例
一、简介今天，跟大家分享一些企业级的互联网技术。
2024.03.26: 2024最流行的网站架构----边缘平台架构：概念与产品
互联网开发的核心是什么？

留言（140条）

马甲嘎嘎说：

正想学这个，你就来了

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 | # | 引用

[email protected] 说：

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

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 | # | 引用

雨枫说：

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

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

雨林木风说：

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

2017年9月13日 11:38 | # | 引用

大张伟说：

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

2017年9月19日 01:30 | # | 引用

PHL 说：

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

2017年9月21日 14:00 | # | 引用

蛋切刀说：

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

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

2017年10月19日 22:36 | # | 引用

蛋切刀说：

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

2017年10月19日 23:51 | # | 引用

丽丽说：

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

2017年11月 9日 21:48 | # | 引用

他乡之客说：

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

2017年11月 9日 22:02 | # | 引用

JimY 说：

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

2017年12月 5日 16:41 | # | 引用

steady 说：

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

2018年1月15日 16:07 | # | 引用

天宇说：

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

2018年1月18日 15:46 | # | 引用

snail 说：

引用shangga的发言：
flex:1的意思是什么？

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

2018年2月26日 10:19 | # | 引用

feline 说：

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

2018年3月31日 17:27 | # | 引用

爱学习的大饺子说：

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

2018年4月18日 13:18 | # | 引用

籠姫说：

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

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

2018年4月24日 11:12 | # | 引用

xpsilvester 说：

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

2018年6月12日 14:36 | # | 引用

成东说：

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

2018年6月14日 14:43 | # | 引用

浅井说：

引用成东的发言：
求教，例子中骰子两个的布局（左上和右下分别两个），如果第一个黑点在右上，第2个黑点在左下，怎么写CSS?
好像很难啊

这样：

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

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

小花说：

好文章值得反复阅读

2018年8月15日 15:40 | # | 引用

孤月泠刀说：

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

2018年9月30日 14:28 | # | 引用

chao 说：

不错！学习了！！

2018年11月22日 23:48 | # | 引用

YJ 说：

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

2018年11月23日 10:17 | # | 引用

[email protected] 说：

这个可太经典了

2019年1月11日 19:01 | # | 引用

团子说：

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

2019年1月29日 16:33 | # | 引用

黑白猫说：

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

2019年3月 3日 01:43 | # | 引用

黄萌说：

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；如果不加的话；这样能成立，只能是三个点大小一致，而且容器的大小能刚刚好容纳这三个点

2019年3月 5日 16:03 | # | 引用

马赫男说：

引用shangga的发言：
flex:1的意思是什么？

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

2019年3月12日 19:12 | # | 引用

小付付说：

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

2019年3月28日 16:45 | # | 引用

Yunis 说：

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

2019年5月17日 16:49 | # | 引用

fly 说：

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

2019年5月29日 10:30 | # | 引用

遁地龙卷风说：

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

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

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

2019年6月 7日 21:14 | # | 引用

grandkai 说：

@xiaoyujia：

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

2019年8月 8日 11:00 | # | 引用

你不知道的巨蟹说：

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

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

群众的眼睛是雪亮的

2019年8月20日 16:18 | # | 引用

萝卜有点脆说：

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

2019年9月30日 10:32 | # | 引用

kkkkk 说：

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

2019年10月26日 19:03 | # | 引用

笔塑流年说：

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

2019年10月29日 14:45 | # | 引用

赵康说：

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

2019年12月24日 00:10 | # | 引用

Even 说：

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

2020年2月 1日 18:38 | # | 引用

pbenz 说：

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

2020年4月21日 23:17 | # | 引用

宇康说：

有的地方根本不正确

2020年6月10日 09:46 | # | 引用

宇康说：

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

2020年6月10日 09:52 | # | 引用

吴和轩说：

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

2020年7月29日 09:50 | # | 引用

ZzG 说：

引用吴和轩的发言：
请问输入框布局中InputAddOn-item的样式是什么？

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

2020年8月18日 15:19 | # | 引用

ILstatus 说：

无法点赞我就很气

2020年11月27日 09:48 | # | 引用

一个前端说：

@小房子：

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

2021年2月23日 14:14 | # | 引用

李子阳说：

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

2021年3月 6日 22:59 | # | 引用

狗蛋说：

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

2023年1月30日 15:53 | # | 引用

realyangchuan 说：

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

2023年4月14日 11:57 | # | 引用

萤火虫说：

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

2023年9月24日 18:42 | # | 引用

explorerhz 说：

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

2023年11月 7日 11:21 | # | 引用

我要发表看法

您的留言（HTML标签部分可用）

您的大名：

«-必填

电子邮件：

«-必填，不公开

个人网址：

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

记住个人信息？

«- 点击按钮

Flex 布局教程：实例篇

一、骰子的布局

1.1 单项目

1.2 双项目

1.3 三项目

1.4 四项目

1.5 六项目

1.6 九项目

二、网格布局

2.1 基本网格布局

2.2 百分比布局

三、圣杯布局

四、输入框的布局

五、悬挂式布局

六、固定的底栏

七，流式布局

文档信息

相关文章

留言（140条）

我要发表看法