12.1 弹性盒布局基础
通过弹性盒可指明 空间的分页方式, 内容的对齐方式,以及 元素的视觉顺序
- 只有直接子元素使用弹性盒布局,后代元素不受影响
- 弹性盒的目的是实现一维内容分布
- 适合沿一个方向布置内容
- 如果需要二维,则要使用栅格布局
12.2 弹性容器
弹性容器: 设置display: flex/inline-flex后就变成了弹性容器,为其子元素生成弹性格式上下文.
弹性容器中所有子元素都是弹性元素
- DOM节点
- 文本节点
- 生成内容
- 绝对定位子元素也是
- 只不过将其视为弹性容器中的惟一弹性元素
12.2.1 方向flex-direction
meyerweb.github.io/csstdg4figs…
- row
- row-reverse
- column
- column-reserve
当使用row-reverse/column-reverse的时候,只是颠倒了外观,Tab顺序和阅读顺序和HTML标记还是一样的
当遇到从右向左书写的语言时,应该使用dir属性或writing-mode属性.而不是使用reverse
12.2.2 其他书写方向
知道有这样一个东西就行了,不做详细笔记.主要目前只接触英文和中文都是从左至右,从上至下的书写方式.就用默认值即可
惟一注意的是,如果要写拼音注解的话,算得上是从上向下的书写方式.可以定义书写方向
12.2.3 换行flex-wrap
主轴上放不下,弹性元素默认不放行,将从弹性容器边界溢出.
使用了warp-reverse后,横向布局的后续行会在上面绘制,纵向布局的会在左侧绘制.
12.2.4 定义弹性流flex-flow
相当于是flex-direction + flex-warp的简写形式, 默认值是row nowrap
深入理解各种轴
弹性元素沿主轴排列(从主轴起边向主轴终边),弹性元素行沿垂轴方向添加(从垂轴起边到垂轴终边)
- 主轴: 内容沿此轴流动
- 主轴尺寸: 主轴上的内容总长度
- 主轴起边: 内容开始流动的那一边
- 主轴终边: 与起边相对
- 垂轴: 块级元素沿此轴堆叠
- 垂轴尺寸: 垂轴方向上内容的总长度
- 垂轴起边: 垂轴上块级元素开始堆叠的一边
- 垂轴终边: 与起边相对
注意:
- 书写模式反转后,一切都会反过来
- 垂轴始终与主轴垂直
- 横向排版时,垂轴是纵向的
- direction-reverse反转的是主轴的方向
- wrap-reverse反转的是垂轴的方向
12.2.5 续谈
在编写css的时候,最好是使用简写属性flex-flow,而不是单独使用flex-direction和flex-wrap
12.3 布置弹性元素
默认情况下,放完全部弹性元素后,留下的空白,始终出现在主轴终边和垂轴终边的方向
12.4 弹性容器
在学习弹性布局的时候,还是要从两个方面入手,一个就是弹性容器及其属性,另一个是弹性元素及其属性.到目前为止,弹性容器已经用烂了,但是弹性元素还是很陌生
12.4.1 调整内容justify-content
在弹性容器的主轴上,如何分配各行里的弹性
- flex-start: 向主轴起边对齐
- flex-end: 向主轴终边对齐
- center: 从主轴中点向两边绘制
- space-between: 第1个元素在起边,最后1个元素在终边,其他的均匀分开
- 只有一个弹性元素时,靠起边对齐
- 不同行里的间距可能不一样,因为弹性元素的数量可能不一样
- space-round: 主轴多余的空间/弹性元素个数/2,分别放在每个弹性元素两边
- 第1个和最后1个外侧会窄一些,因为只有1/2
- space-evenly: 主轴多余的空间均匀的放在每个弹性元素之间
- 和space-round的区别在于两侧也是一样宽
12.4.2 对齐元素align-items
定义弹性元素在垂轴上的对齐方式
- flex-start: 靠垂轴起边
- flex-end: 靠垂轴终边
- center: 弹性元素的中点与垂轴中点对齐
- baseline: 默认情况下弹性元素第一行的基线向第一条基线对齐
- 第一条基线 = 第一个弹性元素的第一行的基线
- 如果某个元素有上外边距,且这个元素的第一行基线大于第一条基线,则向它对齐
- stretch: 可拉伸的弹性元素会与所在行中最高的弹性元素一样高
- 显式设置了
min/max-width/heightwidth/height的不可拉伸 - 拉伸后的尺寸包含外边距
- 显式设置了
12.4.3 弹性元素对齐align-self
应用在弹性元素上,默认是auto,继承align-items值
12.4.4 对齐弹性元素行align-content
定义弹性容器在垂轴方向上有多余空间时,如何对齐弹性元素行;以及空间不足时,从哪个方向溢出
meyerweb.github.io/csstdg4figs…
meyerweb.github.io/csstdg4figs…
只适用于多行显示的弹性容器
-
stretch: 默认值
- 多余的空间平均分配到每行中,拉伸行
- 从终边溢出
-
flex-start
- 多余空间放在终边
- 从终边溢出
-
flex-end
- 多余空间放在起边
- 从起边溢出
-
center
- 多余空间放在两边
- 从两边溢出
-
space-between
- 多余空间放在中间元素的两边
- 从终边溢出
-
space-round
- 类似justify-content的space-round
- 从两边溢出
-
space-evenly
- 类似justify-evenly的 space-evenly
- 从两边溢出
注意
- 均匀分配是针对可用空间,而不是行的尺寸
- 弹性容器只有一行弹性元素的时候,将会占满整个可用空间
12.5 弹性元素
弹性容器的子元素即弹性元素
- 子元素
- 非空的文本节点
- 生成的内容
弹性元素的特性
- 外边距不折叠
- float/clear属性失效
- 只要没有绝对定位,都是块级元素
绝对定位
- 绝对定位的弹性元素将从文档流行中移出,不再参与弹性布局
- 先计算align-self/justify-content 再计算top/bottom等
- order不生效
最小宽度 min-width: 默认值是auto
- 如果min-width设置的比auto值小,那么,弹性元素的宽度有可能比实际内容的尺寸小
12.5.1 flex
是一个简写形式,不过规范推荐有关弹性布局的属性都使用简写模式
flex = flex-grow(增长因子) + flex-shrink(缩减因子) + flex-basis(弹性基准)
弹性基准:
- 弹性基准指明如何应用增长因子和缩减因子,如果想要弹性元素尺寸不变,把增长因子和缩减因子设为0即可
- 如果设置了弹性基准,弹性元素的width就无效了,即使是设置了!important也一样
12.5.2 flex-grow
meyerweb.github.io/csstdg4figs…
有多余空间时,是否允许弹性元素增大,以及以什么比例增大
- 始终是一个正数
- 如果flex没有设定增长因子和缩减因子,默认为1
- 如果flex和flex-grow都没有声明,则默认为0
如果弹性基准为0
- 增长因子是0,宽度会变成内容宽度,设置了width也会被覆盖
- 增长因子是1,弹性元素行的所有空间都会根据因子分配
- 特别注意,不是多出的空间,而是所有空间
- flex-grow是分配的多余空间,flex分配的是所有空间
12.5.3 flex-shrink
空间不足放下所有弹性元素时,当前弹性元素相对其他弹性元素缩小多少.
-
始终是一个下数
-
三种情况无法一直缩小
- 内容不能换行
- 设置了min-width
- 或者置换元素有固定宽度
注意:
-
缩小时,是根据自身宽度以及缩减因子来计算缩减多少.
-
增大时,只根据增大因子来分配整个行的宽度
如果弹性元素的宽度和弹性基准都为auto:
meyerweb.github.io/csstdg4figs…
这种情况就相当于弹性元素的宽度根据内容来
- 如果缩减因子为0,则不会换行,有点像
white-space:nowrap - 如果缩减因子是正数,则会导致换行,值越大,换行的越多
12.5.4 flex-basis
定义弹性元素的初始尺寸,即根据增长/缩减因子改变尺寸前的大小.
弹性元素在主轴上的尺寸计算方法
meyerweb.github.io/csstdg4figs…
- 设置了具体值就取它
- 设置了initial/auto,就取width的值
- 如果width也是auto,那就取content的值
注意
- 如果最后计算的值在min/max/置换元素尺寸/不换行内容尺寸之外,则以min/max/置换元素尺寸/不换行内容尺寸为准
百分数: 相对于弹性容器计算
- 如果弹性基准之和超过了弹性容器的宽度,就会缩小(当然有例外,上面3种情况)
meyerweb.github.io/csstdg4figs…
12.5.5 flex简写
- initial = 0 1 auto
- auto = 1 1 auto
- none = 0 0 auto
- 3 = 3 0 0
- 这个情况下,无法缩小,因为基准是0,而缩减因子是相对于基础计算的,所以始终缩减为0
12.5.6 order
meyerweb.github.io/csstdg4figs…
修改单个弹性元素的显示顺序
- 默认是0
- 负数排在0前面
- 正数排在0后面
注意: 屏幕阅读器的顺序,Tab键的顺序还是由HTML源码顺序定义.这里只是改变视觉效果
