弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。
弹性容器设置属性 display:flex
一、容器属性
flex-flow 复合属性，是 flex-direction 和 flex-wrap 的简写形式。 默认值：flex-flow: row nowrap
⑴ flex-direction 子元素排列方向
flex-direction: row从左到右
flex-direction: row-reverse从右到左
flex-direction: column从上到下
flex-direction: column-reverse从下到上
⑵ flex-wrap 子元素换行方式
flex-wrap: nowrap不换行
flex-wrap:wrap换行
flex-wrap: wrap-reverse反转 wrap 排列，行颠倒
2 justify-content 子元素沿主轴对齐方式
justify-content: flex-start
justify-content: space-between
3 align-items 子元素在交叉轴上对齐方式
align-items: center垂直方向居中
align-items:flex-start垂直方向的顶部/交叉轴的起点对齐
align-items: flex-end垂直方向的底部/交叉轴的终点对齐
align-items: baseline项目的第一行的文字的基线对齐
align-items: stretch默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
二、子元素属性（写在子元素下）
align-self 用于设置弹性子元素自身在侧轴（纵轴）方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
align-items: center
align-items: flex-start
align-items: flex-end
align-items: baseline
align-items: stretch
order 定义子元素的排列顺序。数值越小，排列越靠前，默认为order: 0，可以为负值。
flex-grow 定义子元素的扩展比率，主要作用：分配剩余空间。负值无效。
flex-grow: 0默认值，即如果存在剩余空间，也不放大。
flex-grow: 1如果存在剩余空间，放大 ，等分剩余空间。
flex-shrink 定义子元素的收缩比率，值越大，按比例缩的就越小。
flex-shrink: 1默认值，即如果空间不足，缩小。
flex-shrink: 0不缩小。
flex-basis 定义元素的默认基准值。
设置了flex-basis，width就不起作用；同时存在的时候，优先使用flex-basis。
如果容器的宽度太小，子元素排列不下，设置的flex-basis的宽度会自动缩小，直到占满容器。
链接：https://juejin.cn/post/7038088241437736991
很长一段时间, 我知道有 flex 这个布局方式, 但是始终没有去学它. 3点原因:
最近由于开发需要, 学习了下WeUI的实现 , 发现里面大量使用了 flex 布局, 于是决定学习一下.
Flexbox Layout , 官方名为 CSS Flexible Box Layout Module , 意为"弹性布局", 是CSS3中引入的一种更加灵活高效的布局/对齐/排序方式(还有一种更适合大型布局的 网格布局 CSS Grid Layout Module ). flex 是 flexible 的缩写.
任何一个容器都可以指定为flex布局。
行内元素也可以使用flex布局。
采用flex布局的元素被称为 flex容器 (flex container) , 它的子元素即为 flex元素 (flex item) .
flex容器中包含两个相互垂直的轴, 即 主轴 (main axis) 和 副轴 (cross axis) .
flex元素沿主轴从 主轴起点 (main start) 到 主轴终点 (main end) 依次排布.
如果flex容器包含多行flex元素, 则 flex行 (flex lines) 沿副轴从 副轴起点 (cross start) 到 副轴终点 (cross end) 依次排布.
单个flex元素占据的主轴空间叫做 主轴长度 (main size) , 占据的副轴空间叫做 副轴长度 (cross size) .
Getting Dicey With Flexbox 中提到:
前一段时间同事做过 video 相关的开发, 踩到各种坑, 因此我知道 video 的支持不那么好, 特别是在Android上. 让我惊奇的是 flex 竟然比 video 的支持更好?
从 CanIUse 的数据来看, flex 的支持度是: 82.65% (支持) + 14.17% (部分支持) = 96.81% , 而 video 的支持度是: 92.48% . 浏览器对 flex 的支持好像并没有特别好...
但是有微信的WeUI使用了 flex 布局, 我觉得在移动端 flex 应该还是支持度比较高的.
所以, 如果你是做移动端开发的, 可以优先考虑 flex .
下面就开始介绍与 flex 布局相关的属性. 以作用对象分为两组, 第一组作用于flex容器, 第二组作用于flex元素.
注意: 以下属性值都可以有 initial (该属性的默认值)和 inherit (继承自父元素), 本处省略.
这类属性有6种, 分别为:
注意:
注意: row 和 row-reverse 受到了 direction 属性(默认值为 ltr , 可改为 rtl )的影响.
注意: 此属性只在flex容器中有 多行 flex元素时才有作用.
这类属性有6种, 分别为:
注意: flex元素的 float , clear 和 vertical-align 会失效.
当flex元素有父元素时, 它的 align-self: auto 即为父元素的 align-items 属性否则(无父元素时), 相当于 stretch .
当有剩余空间时, flex元素会根据 flex-grow 按比例分配剩余空间.
默认值 0 代表, 即使有剩余空间, 该flex元素也不放大.
当flex容器空间不足时, flex元素会根据 flex-shrink 按比例缩小.
flex-shrink 为 0 则表示, 即使flex容器空间不足, 该flex元素也不缩小.
flex-basis 定义了分配剩余空间之前flex元素的初始大小, 可为长度值(如 20% , 5rem 等)或 auto 等关键词.
flex-basis: auto 表示, 以 flex元素的主轴长度 为 flex-basis . 若flex元素的主轴长度也是 auto , 则以flex元素内容(即所有子元素)的大小为 flex-basis .
除了 auto 还有 content , max-content , min-content 和 fit-content 关键词, 但是现在浏览器对它们的支持太少, 可以忽略.
(敲黑板) 同学们注意, 这里是重点!
这里的 可选值 我参照了 W3C flexbox 的写法. 其中:
举例来说, a | [ b || c ] 包含的可能情况有 a , b , c , b c , c b .
现在回过头来再看 none | [ <‘flex-grow’><‘flex-shrink’>? || <‘flex-basis’>] 就清晰多了.
注意, none 是一个特殊值, 相当于 0 0 auto .
另外, 如果 flex 中不指定:
注意: flex 的初始值是 0 1 auto , 即由每个 flex 因子本身的默认值组成(比方说 flex-grow 的默认值就是 0 ).
但是 , 如果利用 flex 设置了至少一个 flex 因子, 那么没被设置的那些 flex 因子的默认值(按grow, shrink, basis的顺序)分别是 1 1 0 .
我来举几个栗子.
W3C建议使用简写形式 flex , 因为它可以方便地应对下面4种 常见情况 .
自此, 我们已经知道了 flex-grow , flex-shrink 和 flex-basis 的作用. 根据这三个值, 计算flex元素的大小只需三步:
第一步: 计算元素的 flex-basis , 有两种情况: 1. 具体的长度值, 或, 2. auto (即flex元素的大小). (这里忽略了 content 等目前支持还不完善的关键词).
第二步: 计算剩余空间, 即 剩余空间 = flex容器的内部空间 - flex元素flex-basis值的总和 .
第三步: 按照 flex 因子(放大时为 flex-grow 缩小时为 flex-shrink )分配剩余空间到每个元素. flex元素的最终大小 = flex-basis - flex-factor * 剩余空间 .
举个栗子.
假设flex容器的内部空间为 200px , flex元素的大小的总和是 160px . 看起来, 还有 200 - 160 = 40px 的剩余空间, 应该放大flex元素, 是不是? 不一定! 要看它们的 flex-basis 总和.
假设它们的 flex-basis 总和是 300px , 那么剩余空间应该是 300 - 200 = -100px . 此时剩余空间是 负数 , 应该以 flex-shrink 对每个flex元素在 flex-basis 的基础上进行 缩小 .
下例中, 所有flex元素本身的大小为 80px , 元素中为 flex 值.
200px
0 1 auto
0 3 auto
0 1 150px
0 3 150px
125px
75px
你可以看到, 第一行的flex元素因为设置了 flex-basis:auto , 所以它们的 flex-basis 就相当于元素大小, 即 80px , 即 flex-basis 总和为 160px , 不足容器的 200px 空间, 此时应该放大元素. 但又由于元素的 flex-grow 为 0 , 所以每个元素分配到 0 * 40 = 0px 的剩余空间, 即不放大.
第二行的flex元素设置了 flex-basis:150px , 所以它们的 flex-basis 总和为 300px , 超过了容器的 200px 空间, 故按照 flex-shrink (比例为 1:3 )进行缩小. 由于剩余空间为 -100px , 所以第一个元素应缩小 25px 变成 125px , 第二个元素应缩小 75px 变成 75px .
绝对flex: 从0开始分配空间.
第一行中 flex-basis 为 0 , 表示每个flex元素的初始大小都视为 0 . 此时, 剩余空间就是"flex容器的大小".
相对flex: 从flex元素大小开始分配空间.
第二行中 flex-basis 为 auto , 表示每个flex元素的初始大小都是它本身的大小. 此时, 剩余空间就是"flex容器的大小 - flex元素大小的总和".
呃... flex的东西还是挺多的, 特别是 flex 因子相关的部分, 得花点儿时间理解.
但是, 我相信学flex是值得的, 谁用谁知道!
flex 大致分为两类属性：容器属性和项目属性（容器内部项目的属性）。flex 属性（ flex：1 ）如就给容器内部项目设置的属性。
这里的 wrap 指容器，item 我们称作项目。我们还需要知道 flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。接下来我们逐一介绍这三个属性:
flex grow 属性设置 flex 容器中的 ** 可用空间 ** 应分配给该项的大小。如果所有同级项目都具有相同的值，则所有项目将获得相同的可用空间份额，否则将根据定义的不同比率进行分配。
从左到右三个红色方块的宽度依次为 48.5 + 97 + 48.5 = 194，加上 6 个边框刚好 200。三个 item 按照 1:2:1 的比例占满了容器。上面我们并没有给 item 添加宽度，如果我们给它们加上 width 会怎么计算呢？
我们通过控制台查看三个 item 的宽度从左到右依次是 61 + 72 + 61 = 194，加上 6 个边框刚好 200。但是三个元素并不是按照 1:2:1 的比例分配的。这是为什么呢？仔细看定义后知道，我们给 wrap 设置了 width 为 200px，三个 item 设置了 50px，所以剩余的是 50px。剩余的 50px 按照 1:2:1 的比例又分别分配给了三个 width 为 50px 的 item。 注意这个比例是剩余空间分配的分配比例，而不是分配后元素自身的比例。
设置项目的收缩比例，如果空间不足，该项目将缩小。
默认值为 1。
设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写。
