欢迎来到 flexbox 的世界。我很乐意接受新的思想、观念，或者尝试新的工具，虽然这个过程并不是很顺利。使用 flexbox 对页面进行布局的时间不是很长，发现它真的很好用，日常使用还不够熟练，还得经常翻阮老师的Flex 布局教程：语法篇，于是索性自己总结一篇，一边在实际应用中使用flexbox，一边学习基础理论知识。本篇适用于所有刚接触到 flexbox 布局的同学，也适用于那些想更近一步了解 flexbox 的人，我将尽可能详细地用文字、图片、代码介绍、学习 flexbox 布局。
可以说display是开发者最为熟悉的一个属性，也是最为重要的一个属性，它指定元素的显示行为，准备得来说是规定了外部和内部显示属性的规则，来看 MDN 上对它的定义：
display CSS 属性指定了元素的显示类型，它包含两类基础特征，用于指定元素怎样生成盒模型——外部显示类型定义了元素怎样参与流式布局的处理，内部显示类型定义了元素内子元素的布局方式。
例如我们常用的一些：
1display: none; 2display: block; 3display: inline; 4display: inline-block; 5dispaly: table; 6display: flex; 7display: grid; 8
事实上每一个HTML标签都有一个默认的 display 属性值，例如：<div>、<p>、<ul> 等默认是block 块状元素，而 span、img、svg 等默认 inline 行内元素，二者比较大的区别：
block元素：
inline元素：
flexbox 布局重新定义了格式化上下文，这套规则叫 FFC(Flex Formatting Contexts),Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)
FFC类似于 BFC(block formatting context)，BFC对于前端开发来说一个必须了解掌握的概念，这里只做简单描述：
BFC(block formatting context"块级格式化上下文")
FFC(Flex Formatting Contexts"自适应格式化上下文")
display 值为 flex 或 inline-flex 的元素会变成一个 flex 容器，内部元素变成子项目。容器是一个相对独立的渲染区域，会按照自适应渲染规则来布局。
flexbox 主要由 flex 容器和 flex 子项目组成，对应的有分别作用于这两者的一些属性；想要使用flex布局，得先指定一个容器，这样容器内的元素就能使用flex来进行布局，容器有两个取值 flex 和 inline-flex, 简单地来说，如果你的容器是一个块级元素，可以使用 flex，而行内元素则可以使用 inline-flex，值得注意的是二者均能将容器实现flex布局，不同的地方在用 flex 将会使容器变为块级元素，而 inline-flex 使容器变成行内元素。
1.container { 2 display: flex | inline-flex; 3}
有了容器相应的也就有了容器内的item子项，后续会逐个介绍子项的一些属性：order flex-grow flex-shrink flex-basis flex align-self 等。
flex-direction 属性控制Flex项目沿着主轴（Main Axis）、侧轴（Cross-Axis）的排列方向，在flex 世界中存在两个主轴：Main-Axis（主轴） 和 Cross-Axis（侧轴）它有以下选项：
1flex-direction: row(默认) | row-reverse | column | column-reverse 2
row flex容器的主轴与文本方向相同，以行（水平）方向排列:
column 以列（垂直）方向排列:
而 row-reverse和column-reverse 分别是行列的反向，如下图所示:
1flex-wrap: wrap(默认) | nowrap | wrap-reverse
决定 flex项目在容器内是否不换行排列，nowrap 默认是项目不进行换行:
当 flex 容器无法在一行内容纳所有的 flex 项目时会进行换行:
wrap-reverse 同样是多行排列，只是方向是相反的:
flex-flow 是一个 flex-direction 及 Flex-wrap 组合简写。默认值为：row nowrap，例如：
1flex-flow: row wrap; 2// 等同于 3flex-direction: row 4flex-wrap: wrap
justify-content 定义了项目在主轴上的对齐方式。取值分别是：flex-start（左对齐）、 flex-end（右对齐）、center（居中）、 space-between（两端对齐）、space-around（均分间距，间距两侧对齐）、space-evenly（均分间距）均匀排列每个元素，每个元素之间的间隔相等
1 2justify-content: flex-start | flex-end | center | space-between | space-around 3
justify-content: flex-start 起始处左对齐
justify-content: center 居中对齐
justify-content: center 右对齐
justify-content: space-between 两端对齐
justify-content: space-between 间隔相等
align-items 定义项目在交叉轴方向上的对齐方式
flex-start：项目元素向侧轴起点对齐、flex-end：元素向侧轴终点对齐。
1align-items: stretch | flex-start | flex-end | center | baseline;
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
以上几个都是设置在容器上的一些属性，接下来看下项目上可设置的属性：
1order 2flex-grow 3flex-shrink 4flex-basis 5flex 6align-self
order定义项目在容器里的排列顺序，默认为 0，数字越小，排得越前
如何控制容器内的“剩余空间”，这里需要使用到三个很重要的属性： flex-basis、flex-grow、flex-shrink
这个属性日常用得比较少，其实就是 width 属性的替代品，并且优先级 flex-basis > width，即在分配空间前会预留出 flex-basis 的空间，它的默认值是 aotu，即项目本来的大小。
flex-grow 能够控制项目在容器中所占空间的大小，它接受一个数字值，默认为0。如果其它项目flex-grow 设置为1，其中一个子元素的值是2，在空间允许的条件下它将占用前者两倍的空间。
flex-shrink 前面的grow是扩大，对应的shrink是缩小，即如果容器空间不足，项目将缩小宽度来适应容器，该属性定义了项目的缩小比例，默认为 1，为0 表示不减少，值越大缩小得就越厉害，
flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
align-self 允许单个项目和其它项目有不一样的align对齐方式，默认值为auto，表示继承父元素的align-items属性。可选的属性值即align-items属性值：
1align-self: auto | flex-start | flex-end | center | baseline | stretch;
(#待更新)
参考学习的一些资料：
1、理解Flexbox：你需要知道的一切
2、flexbox
3、flexboxfroggy一款练习flexbox的小游戏
4、display MDN
5、写给自己看的display: flex布局教程
6、The Flexbox Guide
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。