Flex布局简明指南

本文目的

简单介绍Flex各个属性的作用，方便使用时查询。
对于具体的运作方式，网上找 示例图片 看一看即可。

简介

display:flex;属性会让容器元素 启用CSS的一种布局规则 FFC(Flex Formatting Context)，同样的布局规则 还有BFC(块级格式化上下文) IFC(内联格式化上下文) Grid的GFC。

.container {
    display: flex; /* or inline-flex */
}
flex弹性伸缩盒：默认使容器占据一整行宽度，高度根据子元素自适应。
inline-flex内联块级弹性伸缩盒：宽高均由子元素自适应，特别适合做一些根据内容而不断增宽的组件。

Flex的属性分2类：作用于 容器元素 和 容器内子元素。

父容器的属性

除了display: flex外，还有下面这些。
flex-direction 子元素的排列方向，水平/垂直。
flex-wrap 换行。
flex-flow 方向+换行(direction+wrap一起用)。
justify-content 横轴对齐方式。
align-items 纵轴对齐方式。
align-content 弹性盒 堆叠伸缩行的对齐方式。

子元素的属性

order 书写顺序，数值小的在前面，还可以是负数。
flex-grow 弹性盒的扩展比率,根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间 收缩比率, 根据子元素所设置的收缩因子作为比率来收缩空间。
flex-basis 伸缩基准值，其覆盖width的值，受其它属性的影响，如flex-shrink。
flex-shrink 收缩比率,根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
flex 是flex-grow, flex-shrink,flex-basis 的缩写。
align-self 元素在侧轴（纵轴）方向上的对齐方式，可以覆盖父容器align-items的设置。

flex-grow和shrink如何计算"比率"

flex-grow会“瓜分”父项的“剩余空间(主轴)”。
容器的宽度为400px, 子项1的占用为50px，子项2占用了70px，子项3占用了100px，剩余空间为 400-50-70-100 = 180px。
其中，子项1的flex-grow: 0(未设置默认为0)， 子项2 flex-grow: 2，子项3 flex-grow: 1，故剩余空间分成3份，子项2占2份(120px)，子项3占1份(60px)。
所以，子项1真实的占用空间为: 50+0 = 50px， 子项2真实的占用空间为: 70+120 = 190px， 子项3真实的占用空间为: 100+60 = 160px。

同理，flex-shrink就是"减法", "吸收"超出 父容器的空间(主轴)。