CSS Flexible Box Layout Module Level 1
W3C Candidate Recommendation, 19 November 2018
-
Abstract
- flex布局模型中,flex容器中的节点可以朝任意方向排布,并且可以"flex"它们的尺寸(要么扩大,要么缩小),可以在水平和竖直方向上对容器内节点的排布进行控制。flex容器可以嵌套。
-
1. Introduction
- CSS 2.1 定义了四种布局模型,对应的算法均是根据当前节点和相邻节点、以及上级节点的关系来摆放的
- block(落块)布局
- inline(随行)布局
- table(表格)布局
- positioned(指定位置)布局
- flex(弹线)布局是本篇新引入的
-
1.1. Overview
- flex布局与block类似,但是不考量block布局和用到的文本或者文档特有的辖属(比如floats, columns)。flex只是单纯考虑空间分布,以及内容对齐。
- flex容器的内容:
- 可以朝任意朝向方向(上下左右)排布
- 可以通过reversed或rearranged来调整实际排布的次序
- 可以单线(朝一个线轴排布而不折返),也可以要求其折返,从而形成多线排布
- 可以扩大或缩小,以占取多余空间
- 可以动态沿主线轴收起或者展开,同时保持容器在叉线轴上的大小
-
1.2. Module interactions
- 扩展了display辖属
- 新定义的辖属不适用于
::first-line
或::first-letter
伪元素
- CSS 2.1 定义了四种布局模型,对应的算法均是根据当前节点和相邻节点、以及上级节点的关系来摆放的
-
2. Flex Layout Box Model and Terminology
- flex容器可以是任意元素,只要其display辖属为flex或者inline-flex
- 其内容叫做flex条目
- flex布局偏向于flex的朝向
- 默认朝向为书写方向
- 朝向上的线轴叫做主线轴,主线轴占的空间叫做主线维,
- 主线轴有开始端(主线头)、结束端(主线尾)
- 元素在主线维上占据的大小(高度或者宽度)叫做主尺寸
- 垂直于朝向的线轴叫做叉线轴,
- 同样地有叉线维、叉线头,叉线尾、叉尺寸等
- flex容器可以是任意元素,只要其display辖属为flex或者inline-flex
-
3. Flex Containers: the flex and inline-flex display values
- flex或inline-flex
- display为flex的容器,其本身按照block元素对待
- display为inline-flex的容器,其本身按照inline元素对待
- flex容器主要是将flex布局作用在其内容上
- 例如floats无法接入flex容器
- 例如flex容器的外扩不会与其内容的外扩重合
- 但是overflow辖属依然有效
- 一些适用于block容器的辖属不适用于flex容器
- float以及clear对flex条目无效
- vertical-align对flex条目无效
::first-line
以及::first-letter
伪元素不适用于flex容器- flex容器的首行或者首字,不会受其上级的格式影响
- flex或inline-flex
-
4. Flex Items
- 简单地说,flex容器中的flex条目是构成流式内容的盒子。
- 相邻的文本途会被包裹成更大的匿名block容器,然后再作为flex条目
- 但是,如果文本途只包含空白的话,不会被呈现
- 每个flex条目自身构成一个嵌套的flex容器
- (略去一些内容)
-
4.1. Absolutely-Positioned Flex Children
- flex容器中,指定绝对位置的节点不参与flex布局
- 此节点被视为是存在于一个单独的、固定大小的flex容器中
- 此时auto外扩值被设为0
- (注解略)
- 此节点被视为是存在于一个单独的、固定大小的flex容器中
- flex容器中,指定绝对位置的节点不参与flex布局
-
4.2. Flex Item Margins and Paddings
- 相邻flex条目的外扩不会重合
- 基于百分比的外扩和内缩,和block箱体一致,按照它们包含block的随行大小来解出
- auto外扩会吸收线维的额外空间而扩充
- 可以用作对齐的目录,或者用于将条目隔开
-
4.3. Flex Item Z-Ordering
- flex条目安装inline blocks来绘制,只是order辖属会影响其前后次序,并且auto以外的z-index值会创造出一个堆叠的情境,即便其position为static(也就是具体表现像position为relative)
-
4.4. Collapsed Items
- 通过设置
visibility:collapse
可以让一个flex条目变为叠起状态,此条目不会被呈现,但是会留下一个结构用以支撑叉轴- 这一点和
display:none
不同
- 这一点和
- 此设置会引起折返重排
- (例子过)
- 通过设置
-
4.5. Automatic Minimum Size of Flex Items
- (有点复杂,过)
-
5. Ordering and Orientation
- flex容器的内容可以按任选方向、任选次序排布
- 使用flex-direction、flex-wrap、order辖属来控制
- 只是影响视觉呈现,语音顺序和导览还是基于源次序
-
5.1. Flex Flow Direction: the flex-direction property
- flex-direction
- row,flex容器的主线轴的朝向,等同于当前书写模式的随行线轴
- row-reverse,同row,但是交换主线头和主线尾的方向
- column,flex容器的主线轴的朝向,等同于当前书写模式的落块线轴
- column-reverse,同column,但是交换主线头和主线尾的朝向
- flex-direction
-
5.2. Flex Line Wrapping: the flex-wrap property
- flex-wrap,用来控制单线还是多线,以及叉线轴的方向
- nowrap,单线轴
- wrap,多线轴
- wrap-reverse,同wrap
- 此值以外的情况,叉线头的方向等同于当前书写模式下的随行头或落块头的方向,叉线尾方向与叉线头的方向相反
- 此值会交互叉线头和叉线尾的方向
- flex-wrap,用来控制单线还是多线,以及叉线轴的方向
-
5.3. Flex Direction and Wrap: the flex-flow shorthand
- flex-flow用于短合flex-direction和flex-wrap
- 注意,flex-flow的方向和书写方向相关
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
-
5.4. Display Order: the order property
- order辖属改变flex容器内容的呈现顺序
- 取值类型为integer,用于指定flex条目所属的ordinal group(次序组)
- 同一次序组中的元素,按照它们在源中出现的次序排布
- 指定绝对位置的节点呢,其order值为0,用于决定它们的绘制顺序
- order可以设为负值,这样就排在默认的0值之前了
- order目前对于非flex容器中的元素不起作用
-
5.4.1. Reordering and Accessibility
- 不影响在非视觉媒介(比如言语)上的元素排布
- 不影响导览模式下的遍历顺序
- (用一两屏的篇幅介绍了一个相关的例子)
- order辖属改变flex容器内容的呈现顺序
- flex容器的内容可以按任选方向、任选次序排布
-
6. Flex Lines
- flex容器中的条目沿着flex条线排布,flex-wrap用于控制单线或者多线
- 单线排布可能会导致溢出
- 多线排布采用折返来避免溢出
- 多线情况下,每条线都可以独立排布
- justify-content和align-self辖属一次只考虑一条线上的内容
- 多线flex容器(即便当前只有一条线),每条线的叉尺寸呃,是能够容纳线上所有元素的最小取值,决定于align-self应用之后。
- 条线们根据align-content辖属来对其
- 单线flex容器,叉尺寸和align-content无作用
- 一条线上的主尺寸则等同于flex容器的主尺寸
- flex容器中的条目沿着flex条线排布,flex-wrap用于控制单线或者多线
-
7. Flexibility
- 一个flex条目是完全不弹线的,只要其flex-grow和flex-shrink都设为0
-
7.1. The flex Shorthand
- flex
- 取值:none | flex-grow flex-shrink? || flex-basis
- 初始:0 1 auto
- flex-grow和flex-shrink合称flex factors
- 对于一个flex条目,会参考其flex辖属,而非其主尺寸辖属来决定其箱体的主尺寸
- 非flex条目上flex辖属无效
- flex-grow,设置flex放大因子,默认为1
- 0到1之间的值有特殊行为,总加成小于1时,不会完全占据多余空间
- flex-shrink,设置flex缩小因子,空间不够时应该从条目榨取多少空间,默认为1
- 会乘以flex base size来算出需要榨取的空间
- flex-basis,指定flex条目的初始主尺寸,也就是分配多余空间之前的尺寸
- 和width和height接受类似的取值
- auto
- auto从主尺寸取值,如果取来的是auto,那么从content取值
- content
- 按flex条目的内容取值,常等于max-content size,但会受立面比率、内在尺寸约束、正交方向的流等因素影响
- width
- 解析类似于width和height
- auto
- 和width和height接受类似的取值
- none
- 会展开成
0 0 auto
- 会展开成
- (给出了一个flex-basis设置为0和auto的对比图示)
- flex的初始值为
flex:0 1 auto
- 注意:flex-grow和flex-basis在flex短合中初始值异同
- (对取值为无单位的0做出了一些规定)
-
7.1.1. Basic Values of flex (informative)
flex: initial
- 等同于
flex: 0 1 auto
,按width/heigh辖属来设置条目的尺寸,(如果条目的主尺寸为auto,那么按照内容来设置尺寸),不分配多余的空间- 可以用对齐或者auto外扩来沿主线轴对齐flex条目
- 等同于
flex: auto
- 等同于
flex: 1 1 auto
,按width/heigh辖属来设置条目的尺寸,但是将尺寸完全弹性化,会吸收多余空间 - 在
flex: auto
、flex: initial
、flex: none
并存的情况下,多余空间会拨给flex: auto
的元素
- 等同于
flex: none
- 于
flex: 0 0 auto
,按width/heigh辖属来设置条目的尺寸,但是去弹性化,跟flex: inital
相比呢,不允许收缩
- 于
flex: <positive-number>
- 等同于
flex: <positive-number> 1 0
,放弃基础大小,完全按照比例来分配大小
- 等同于
- 默认情况下,flex条目不会收缩到小于最小内容尺寸,但可以通过min-width和min-height来调整
- flex
-
7.2 Components of Flexibility
- 通过独立的长款辖属,可以设置特定弹性成分
-
7.2.1. The flex-grow property
- 设置flex扩放因子,取值不能为负
-
7.2.2. The flex-shrink property
- 设置flex收缩因子,取值不能为负
-
7.2.3. The flex-basis property
- (过)
-
8. Alignment
- 缩放之后,flex条目的维度已定,可以开始考虑对齐了
- 可以用外突辖属来实现对齐
- 之前CSS Box Alignment中的属性也可以用(有评注)
-
8.1. Aligning with auto margins
- auto外突跟在block流中的效果类似
- 计算flex bases和flexible lengths,auto外突取值为0
- 在使用
justify-content
和align-self
对七千,任何多余的空间会被分配给那个维度上的auto外突 - 溢出性的箱体会忽略auto外突,然后再end方向溢出
- 如果多余空间分配给了auto外突,那么对齐相关辖属不会起作用,因为没有多余空间可用了
- (有两个示例)
- auto外突跟在block流中的效果类似
-
8.2. Axis Alignment: the justify-content property
- justify-content沿当前条线的主线轴对齐条目
- 可以设置为flex-start | flex-end | center | space-between | space-around
- flex-start
- 朝主线头排列元素
- flex-end
- 朝主线尾排列元素
- center
- 剧中排列元素,如果溢出,则两边溢出部分相同
- space-between
- 等间距排布元素,无边距,某些条件下,会回退到flex-start
- space-around
- 类似于上面那种,但保留半边距
- justify-content沿当前条线的主线轴对齐条目
-
8.3. Cross-axis Alignment: the align-items and align-self properties
- align-items在当前条线的叉线轴方向上对齐条目,如果外突为auto,则无效;可以用align-self覆盖之
- auto,将对齐控制推给上级箱体的align-items
- flex-start
- flex-end
- center
- basline
- stretch
- align-items在当前条线的叉线轴方向上对齐条目,如果外突为auto,则无效;可以用align-self覆盖之
-
8.4. Packing Flex Lines: the align-content property
- align-content用于对齐flex容器中的条线,需要叉线轴上有多余空间
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch
- align-content用于对齐flex容器中的条线,需要叉线轴上有多余空间
-
8.5. Flex Container Baselines
- 如何决定flex容器的基线
- first/last main-axis baseline set (过)
- first/last cross-axis baseline set (过)
-
9. Flex Layout Algorithm
- (暂过)
-
10 Fragmenting Flex Layout
-
Appendix A: Axis Mappings
-
11. Privacy and Security Considerations
-
Conformance