本文章首发于公众号「 MoTec 」，公众号定期特别推送 Java、Python 干货、共享网络资源、一起讨论技术、思维认知、投资理财，一起成长、To Be Better。 → 阅读原文效果更佳
哎呀，最近又入坑了，因工作需要，最近不得不做一款小程序，我一个后台开发工程师，跑来小程序打酱油，我也是很无奈。其实写 JS 代码还 OKey，但是涉及到界面，让我自己布局，简直叫我抓狂呀。不过还好，相对安卓来说，还不算特别难。
在传统中，一讲到布局，我们就会想到「盒子模型」，也就会经常用到 display 属性、position 属性、float 属性。
我这里做了个脑图，可以快速入门，哈哈
但是这个模型对于那些特殊布局非常不方便，比如，垂直居中就不容易实现！
在接下来说到的「弹性布局」中，这个问题就轻易解决。
下面一起来学习一下这个弹性布局 Flexible Box。它可以非常简便、完整、响应式地实现各种页面布局。
目前，它已经得到了所有浏览器的支持，所以我们不用担心适配！
学习一个新的事物，我们要先掌握一些基本的概念，如果某些概念暂时不理解，可以临时放一放，读到后面，图文结合，到了一定层次，我们应该自然而然地就会明白了。
就好像，就算你小学再怎么不认真上课，但到了初中，当时你不懂的小学的知识，你就可能已经明白了。就是这个理，但中途你不可放弃不断学习。
声明一下，文章主要参考了两篇国外的文章 「A Complete Guide to Flexbox」 和 「A Visual Guide to CSS3 Flexbox Properties」和廖雪峰老师的翻译，但是我觉得他翻译不是特别准确，所以会有些保留，同时也加入自己的一些理解。
整体思路是如下思维导图所示
图片看得不是非常清楚，而且由于电脑屏幕不够大，截的图也没能截全，我也很无奈。如果觉得不错，可以私下找我分享。
基本概念
认真看图
采用 Flex 布局的元素，被称为 Flex Container，可称「Flex 容器」。它的所有子元素称为 Flex Item。
廖老师文中说是 Flex 项目，我觉不恰当，我称它们为「子项」，不过最好还是成为「item」。
这里需要注意的是，经我测试，如果子项中，再放入其他元素，这些元素就再是 Flex Item 了，也就不受弹性布局的约束了，它们没有继承关系，或者说『父-子-孙』这样的关系。
另外还有个特别主要的概念 Axis 即「轴」，容器默认存在两根轴：主轴（main axis）和交差轴（cross axis），主轴默认是水平的，另外一根垂直于主轴。
主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。
items 默认沿主轴排列。单个 item 占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。
这里的概念，结合上面的图片非常好理解，看的时候最好用大屏，文字和图来回切着看。
我建议，在我们理解这些概念时，不要试图先翻译成中文后再理解，能按英文理解记忆就按英文的套路走。
学好英文对个人提升非常有帮助。
怎么用
任何一个容器都可以指定为 Flex 布局，需要设置 display 属性即可
.box{
display: flex;
display: -webkit-flex; /* 兼容 Webkit内核 */
}
行内元素也可以使用Flex布局
.box{
display: inline-flex;
}
它的属性可分为两种，一种在 container 容器中设置，一种在 item 子项中设置。
我们主要设置 container 的属性，item 中的属性很少设置。
Container
container 中的属性有六个，flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
flex-direction
决定主轴的方向（即 item 子项的排列方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row 表示行，即水平，column 表示列，即垂直；再加上反方向，reverse，简单点就是：item 排列是有方向的，按上到下，左到右，或者相反排列。
row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿
其实，只要我们英文好，见文思其意，非常好理解。因为有语言的基础，外国人在命名方面比我们命名好太多。
flex-wrap
默认情况下，项目都排在一条线（又称「轴线」）上。flex-wrap 属性定义，如果一条轴线排不下，如何换行。wrap 的意思是如果容器中 item 满了，它如何去包含它们。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三个值。
nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方。
flex-flow
为了给我们使用的人方便、偷懒，它把 flex-direction 属性和 flex-wrap 属性的简写了。
所以我们在学时，也要思考、明白为什么设计的人这样设计，或者自己想想，假如换作是我们自己设计，与人方便，会怎样设计。这样思考，估计我们会学得更快，也更容易懂。
.box {
flex-flow: ;
}
里面的两个值分别对应前面的两个属性的值，默认值为 row nowrap。
justify-content
定义 items 在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取 5 个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右，注意轴的方向是不定的！
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
前面定义了 items 在主轴上的对齐方式，那我们就应该想到 items 在交叉轴上的对齐方式
align-items
定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取 5 个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度
align-content
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。因此我们不那么常用，也够用了！知道一下就好了，等用到的时候可以再来深入。
技术日益更新，是学不完的。个人认为：够用、不过时就好，关键是学会技术体系、技术思维，学会如何学习。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
该属性可能取 6 个值
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴。
建议回去看看前面的思维导图，自己再理清一下思路。
刚刚说完了 container 的属性，item 也有属性可以设置，来约束一下 item 自身来满足我们布局的需求，但其实都很少用，基本上只用到一半的属性不到。
Item
以下 6 个属性设置在 item 上。
order
定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
.item {
order: ;
}
flex-grow
定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
.item {
flex-grow: ; /* default 0 */
}
如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink
flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: ; /* default 1 */
}
如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为 0，其他项目都为 1，则空间不足时，前者不缩小。负值对该属性无效。
flex-basis
定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。
.item {
flex-basis: | auto; /* default auto */
}
它可以设为跟 width 或 height 属性一样的值（比如：350px），则项目将占据固定空间。
flex
又是与人方便，flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。
所以以后我们写代码，设计接口时，希望我们都要想到怎么设计才能让别人更方便使用，而不是自己怎么舒服怎么造轮。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取 6 个值，除了 auto，其他都与 align-items 属性完全一致。
所以说，学好 container 中属性，后面的属性就很好理解了。
最后，我们学习一个事物也可以从需求设计方面出发，我们日常有哪些需求？我想这个东西是不是应该满足我这样做……，我们再去看博客、文档，就会更好理解。因为我们事先做了准备，对这个事物有过思考。
推荐阅读
网友评论