你会看到，不管是什么布局，Flex往往都可以几行命令搞定。
骰子的一面，最多可以放置9个点。
如果不加说明，本节的HTML模板一律如下。
首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。
.box{display:flex;}设置项目的对齐方式，就能实现居中对齐和右对齐。
.box{display:flex;justify-content:flex-end;}设置交叉轴对齐方式，可以垂直移动主轴。
HTML代码如下。
.box{display:flex;flex-wrap:wrap;}二、网格布局2.1基本网格布局最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。
.Grid{display:flex;}.Grid-cell{flex:1;}2.2百分比布局某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。
.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:0012em;}.HolyGrail-nav{/*导航放到最左边*/order:-1;}如果是小屏幕，躯干的三栏自动变为垂直叠加。
@media(max-width:768px){.HolyGrail-body{flex-direction:column;flex:1;}.HolyGrail-nav,.HolyGrail-ads,.HolyGrail-content{flex:auto;}}四、输入框的布局我们常常需要在输入框的前方添加提示，后方添加按钮。
.InputAddOn{display:flex;}.InputAddOn-field{flex:1;}五、悬挂式布局有时，主栏的左侧或右侧，需要添加一个图片栏。
.Media{display:flex;align-items:flex-start;}.Media-figure{margin-right:1em;}.Media-body{flex:1;}六、固定的底栏有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。
.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:rowwrap;align-content:flex-start;}.child{box-sizing:border-box;background-color:white;flex:0025%;height:50px;border:1pxsolidred;}（完）
马甲嘎嘎说：
正想学这个，你就来了
drunkevil说：
这个感觉好有用啊！
stonex说：
非常感谢，尝试使用下。看样子能简化好多东西。
session说：
骰子应该是6点
Cola说：
里面这“vertical-align:center;”还有用么。
yujieyu7说：
很好，很实用
clover说：
太帅了！
chshouyu说：
很好很实用
Cheney说：
引用Cola的发言：里面这“vertical-align:center;”还有用么。
vertical-align没有center的值，要给也只能给middle。反正好像也没有用到。
msisliao说：
赞，大爱这篇示例，原先感觉非常理解不了，看完后、、嘿嘿，真的理解大半了。。非常感谢
张杨说：
outlaws说：
骰子这个例子很有意思，工作中很多场景都有骰子这个例子的应用。学习了~~！233333
引用Cheney的发言：
对于兼容问题该如何处理呢？
bolo说：
关于四项目的第二个布局(四个角各一个点):如果骰子的四个点大小变小,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进行滚动，不过滚动效果远没有使用原生滚动好，不知道有没有什么其他比较好的解决方案。
Jolson说：
非常感谢，最近正学习flex布局，写的很清楚。
Brant说：
joker说：
CSS终于有了像样的自动布局了~
weager说：
这么难懂的知识经过阮老师的讲解都变得如此简单，赞！阮老师的文笔真是厉害
吴聊说：
纯干货不错
大叔说：
不错，博主这图文并茂的杠杠的
小松鼠说：
写的不错，赞一个！
davidchen说：
学习了。
shenger说：
色子以下的网页布局部分说的很笼统啊，希望以后能再说的详细一点，谢谢啦
dvaknheo说：
VisualStudio.Net的布局方式，flex能做到么如一下两者格式，都要把主内容放在第一树|主内容树|_______树|底板
树|主内容__|_______底板
Zaki说：
阮老师的东西不错
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;}
fonglezen说：
引用前端菜鸟的发言：display:flex现在应该是用兼容性的吧，在部分的安卓手机里面不好用，现在还在用display：box
觉得应该与时俱进，4.0安卓的用户都占据了97%以上了吧。还有2.x的，估计也是不怎么上网不怎么用手机的用户吧。所以可以放心大胆放心用。
yooly说：
太神了，写得很好，通俗易懂
phc说：
在骰子的布局中的第四个项目中确定能达到像图中所示的吗，如果每个项目之间没有margin值，从主轴的右边对齐那不是第一行的三个点都要靠右吗，而不是每个都有间隔
我的代码设置成如下才能达到阮老师的效果
display:flex;flex-wrap:wrap;flex-direction:row-reverse;justify-content:space-between;align-content:space-between;
Biox说：
unclefeng说：
中间那个网格布局的百分比布局，是不是少啊了很多元素。css代码和html代码对不上号啊
是不是
justify-content:还有等等……ie10都不兼容的
tommyfok说：
之一说：
小房子说：
.Grid-cell2.u-1of3{flex:1033.3333%;background-color:#7CFC00;}.Grid-cell2.u-1of4{flex:1025%;background-color:#E74D3C;}
如果flex的放大比例都为1的话，那它的宽度在什么基础上进行变化的啊？一直没搞懂这个
yunxi说：
在UC浏览器下不支持吧
奈何说：
请问下，第三个圣杯布局，为什么css中要写很多个flex：1
响应式初学者1说：
学习了，非常详细易懂，适合入门！
shangga说：
flex:1的意思是什么？
小静说：
非常感谢，很喜欢您的教程，发现1.3三项目少了.box{justify-content:space-between;},难道只有我一个人发现了...
Helios说：
这个是不是兼容性不算太好呀，只有chrome完全支持呀
汤米说：
"1.4四项目"的代码有点问题，如果设置justify-content:flex-end的话，第一行的3个元素不会那么平均的分布的，而是挤在右边，像float:right似的
张阳说：
单项目中第五个，水平和垂直居中，父级设置display：flex；后，子元素设置margin：auto；应该是最简单的。我是在新书css揭秘上看的。具体的原理我还不太懂。
Eliza说：
cody说：
他自己开篇就说了==
开源无憾说：
Ella说：
赞，筛子布局非常易懂。实际示例开发过程中非常常见，很实用。干货！很喜欢阮老师写作的风格
王冬说：
军说：
项目1.3是错的，这样写样式不能是截图上面的。flex-direction:column;justify-content:space-between;box得加上这两条属性
happyyyhy说：
膜拜大牛
tolerious说：
引用session的发言：骰子应该是6点
不不不，阮老师的意思应该是最多可以放九点，哈哈。
Wgggg说：
圣杯布局,IE11完全乱掉了
韩辉说：
阮老师，我想问一下。flex布局中，各个item之间的间距是如何设置的呢？用margin可以做到，但是面试的时候面试官说不用margin也可以。不是很理解。我看到的flex布局都是item连接到一起的。
deg说：
flex布局能不能实现这样的效果：容器内的项目固定宽高，设备宽度减小，项目自动换行，换行之后内容部分整体保持水平居中，同时保持项目七的流式布局？能的话改如何实现？
ben说：
收获很大，感谢
德芙小猪说：
非常好的教程。看了受益匪浅。
全部看明白了，感觉收获很大。
夏夜星空说：
厉害啊，写的很精简，没有多少废话。赞
FLEX布局说：
非常给力，感谢！
coderfoobar说：
引用tolerious的发言：
那还是麻将九饼吧
Dreambuild2021说：
受益匪浅,豁然开朗!
koz说：
1.2那.box{display:flex;}
.item:nth-child(2){align-self:center;}这个错了，得不到图中的效果。
前端爱好者说：
属性是好属性，但是兼容性还是不怎么好，IE和一票国产移动端浏览器就坑死了
昭说：
悬挂布局里面的基本栗子里面第三个块怎么能紧接着在第一个块的下面，而不受第二个块的高度影响
不再犹豫说：
flex布局怎样设置单个子项在主轴上的位置？
高大磊说：
多谢，看过最好的博客
刘继伟说：
losymear说：
圣杯布局的header,footer{flex:1;}大了些吧flex:0.3这样
jeremy说：
看了这个，瞬间觉得flex要颠覆以前小心谨慎的display+float布局啊啊啊
33说：
flex-basis:100%有什么用
24说：
flex:1是什么哪个属性
哈喽基地说：
引用不再犹豫的发言：flex布局怎样设置单个子项在主轴上的位置？
我也有在想呢，有时候需要将子项设置在位置，特别是需要按某个比例。
辣牛说：
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
赵瑞说：
一个点的时候，只设置.box{display:flex}是不行的，因为父元素的align-items默认值为stretch，会使子元素的高度充满整个容器，而不是在左上角。所以应该还要给.box加上align-items:flex-start;
webkws说：
.item{flex-grow:1;flex-shrink:1;flex-basis:0%;}
flex:1=>110
季一辉说：
引用koz的发言：1.2那.box{display:flex;}
王先森说：
非常实用谢谢老师跟着学习了一遍让我对布局更加深入了
dady说：
1.5第三个少了：.row:nth-child(1){justify-content:space-between;}
捍卫者说：
左蓝说：
@phc：
对的，我也是亲自写了一遍才感觉这里阮老师写得达不到效果
tinywenwen说：
flex:0025%;这是多个属性连用吗？分别是什么属性？
石心说：
引用季一辉的发言：我试了也不行，是不是作者代码没有给全
jmcheng说：
五、悬挂式布局那里的效果是怎样实现的呢？感觉像瀑布流的布局
HYZT说：
xiaoyujia说：
色子布局中两个点的项目中的倒数第二个：一个点在正中间另一个点在左上角那个布局不对吧？.box{display:flex;}
.item:nth-child(2){align-self:center;}这样写并不能保证到达效果，当外层盒子的尺寸变大时候，正中间的那个点就偏离中心位置了，图例中的‘视觉居中’是色子的尺寸和点的尺寸凑巧的结果吧
雨枫说：
后面的例子父元素的宽度是怎么设置的？
雨林木风说：
初学，目前骰子项目里有的无法实现，比如二项目倒数第二个，三项目第一个，四项目第一个，九项目
大张伟说：
从来都是抵触写css的，自从看到flex后，才发现原来布局也挺有意思的
PHL说：
蛋切刀说：
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:5pxsolid#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:047%;}.Grid-cell:nth-child(3),.Grid-cell:nth-child(4),.Grid-cell:nth-child(5){flex:030.3%;}.Grid-cell:nth-child(6),.Grid-cell:nth-child(7),.Grid-cell:nth-child(8),.Grid-cell:nth-child(9){flex:022%;}
丽丽说：
收益匪浅，以前布局没考虑这么多
他乡之客说：
第一次留言，感谢阮老师，让我们学到了很多东西！
JimY说：
三个点的那个box上少了justify-content:space-between;
steady说：
这样的情况多加了一个类名，在浏览器不能正确的显示，这是为什么啊
天宇说：
snail说：
引用shangga的发言：flex:1的意思是什么？
flex-grow:1;flex-shrink:1;flex-basis:100%;
feline说：
感觉圣杯布局那个，不用order属性更方便，直接按照正常的顺序写就好了。
爱学习的大饺子说：
引用军的发言：项目1.3是错的，这样写样式不能是截图上面的。flex-direction:column;justify-content:space-between;box得加上这两条属性
籠姫说：
引用feline的发言：感觉圣杯布局那个，不用order属性更方便，直接按照正常的顺序写就好了。
这是为了SEO，重要的东西写在前面永远是有利于搜索引擎的。
xpsilvester说：
想请教一个问题，五、悬挂式布局这个例子中前两个小栏目在左侧，一个大栏目在右侧，这样的布局也可以用flex实现吗
成东说：
求教，例子中骰子两个的布局（左上和右下分别两个），如果第一个黑点在右上，第2个黑点在左下，怎么写CSS好像很难啊
浅井说：
引用成东的发言：求教，例子中骰子两个的布局（左上和右下分别两个），如果第一个黑点在右上，第2个黑点在左下，怎么写CSS好像很难啊
这样：
.box{diplay:flex;justify-content:space-between;}.item:nth-child(1){align-self:flex-end;}
小花说：
孤月泠刀说：
用了好久的传统布局，也简单学习过flex，这次照着实例做了一遍后，我都快感动哭了，Flex布局太好用了，特别是flex:00100%;这个属性太美好了，跟吃到了特级厨师的顶级料理一样。。。。
chao说：
YJ说：
这个可太经典了
团子说：
求教，1.4四项目，4个点可以不用分开div吗？直接分为两行，css怎么写？拜托拜托
黑白猫说：
一个点在垂直居中使用align-items:center;时，需要添加一个高度才有效果。.box{display:flex;align-items:center;height:100%;}
黄萌说：
1.3三项目是不是有些问题呀.box{display:flex;}
.item:nth-child(3){align-self:flex-end;}.box是不是还需要加一个justify-content：space-around；如果不加的话；这样能成立，只能是三个点大小一致，而且容器的大小能刚刚好容纳这三个点
马赫男说：
子元素在父元素中均分宽度，与自己的宽度无关了
小付付说：
emmmmm。。。。。为什么没有点赞
Yunis说：
fly说：
遁地龙卷风说：
之前偷懒只看了第一篇就觉的满足了，这回看了一下第二篇，又收获许多。
看了下MDN,flex:auto;代表flex:11auto;按照之前的理解，应该代表01auto才是，感觉这么搞，可读性不好，规则越来越多了。
建议实例中的...可以换成具体的名字或是加个背景色
grandkai说：
@xiaoyujia：
我试了下两点布局第二个点不能居中
你不知道的巨蟹说：
群众的眼睛是雪亮的
萝卜有点脆说：
kkkkk说：
晕，IPHONE的设计师肯定很早就看过你博客了
笔塑流年说：
除了圣杯布局还有别的常用布局吗可不可以推荐一本css+html的书籍
赵康说：
Even说：
pbenz说：
在写四点的时候，我认为那一个column应该写成row比较好。
宇康说：
有的地方根本不正确
我是宇康同志，我觉得里面有地方是出错了的，我照着打效果不行，我自己改了之后才可以的，希望你能认识到自己的错误然后改正！
吴和轩说：
请问输入框布局中InputAddOn-item的样式是什么？
ZzG说：
引用吴和轩的发言：请问输入框布局中InputAddOn-item的样式是什么？
不定宽由内部图片撑起整个样式。
ILstatus说：
无法点赞我就很气
一个前端说：
@小房子：
放大比例是按剩余空间进行分配的u-1of3占了33.3333%u-1of4占了25%先算他们的实际占用大小再把剩余空间进行分配u-1of3比u-1of4还是8.3333%
李子阳说：
敲一敲，依然收获很大阮一峰，永远滴神
狗蛋说：
流式布局的缺陷是每个项目必须都是同等尺寸是吗
realyangchuan说：
最后一个，如果相邻item间有间隔，但边上没有间隔。这个实现就弄不成
萤火虫说：
我愿称其为flex布局最强教程！有图有文字还有代码可以自己演示