一文说白 CSS 弹性布局 Flexible Box

本文章首发于公众号「 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 中属性，后面的属性就很好了解了。

最后，我们学习一个事物也可以从需求设计方面出发，我们日常有哪些需求？我想这个东西是不是应该满足我这样做……，我们再去看博客、文档，就会更好了解。由于我们事前做了准备，对这个事物有过思考。

推荐阅读

????我的世界里只有 0 和 1

????怎么的排序算法才算稳固