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伪元素
  • 2. Flex Layout Box Model and Terminology

    • flex容器可以是任意元素,只要其display辖属为flex或者inline-flex
      • 其内容叫做flex条目
    • flex布局偏向于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容器的首行或者首字,不会受其上级的格式影响
  • 4. Flex Items

    • 简单地说,flex容器中的flex条目是构成流式内容的盒子。
    • 相邻的文本途会被包裹成更大的匿名block容器,然后再作为flex条目
    • 但是,如果文本途只包含空白的话,不会被呈现
    • 每个flex条目自身构成一个嵌套的flex容器
    • (略去一些内容)
    • 4.1. Absolutely-Positioned Flex Children

      • flex容器中,指定绝对位置的节点不参与flex布局
        • 此节点被视为是存在于一个单独的、固定大小的flex容器中
          • 此时auto外扩值被设为0
        • (注解略)
    • 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,但是交换主线头和主线尾的朝向
    • 5.2. Flex Line Wrapping: the flex-wrap property

      • flex-wrap,用来控制单线还是多线,以及叉线轴的方向
        • nowrap,单线轴
        • wrap,多线轴
        • wrap-reverse,同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

          • 不影响在非视觉媒介(比如言语)上的元素排布
          • 不影响导览模式下的遍历顺序
          • (用一两屏的篇幅介绍了一个相关的例子)
  • 6. Flex Lines

    • flex容器中的条目沿着flex条线排布,flex-wrap用于控制单线或者多线
      • 单线排布可能会导致溢出
      • 多线排布采用折返来避免溢出
    • 多线情况下,每条线都可以独立排布
      • justify-content和align-self辖属一次只考虑一条线上的内容
    • 多线flex容器(即便当前只有一条线),每条线的叉尺寸呃,是能够容纳线上所有元素的最小取值,决定于align-self应用之后。
      • 条线们根据align-content辖属来对其
    • 单线flex容器,叉尺寸和align-content无作用
    • 一条线上的主尺寸则等同于flex容器的主尺寸
  • 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
      • 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: autoflex: initialflex: 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来调整
    • 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-contentalign-self对七千,任何多余的空间会被分配给那个维度上的auto外突
        • 溢出性的箱体会忽略auto外突,然后再end方向溢出
      • 如果多余空间分配给了auto外突,那么对齐相关辖属不会起作用,因为没有多余空间可用了
      • (有两个示例)
    • 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
          • 类似于上面那种,但保留半边距
    • 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
    • 8.4. Packing Flex Lines: the align-content property

      • align-content用于对齐flex容器中的条线,需要叉线轴上有多余空间
        • flex-start
        • flex-end
        • center
        • space-between
        • space-around
        • stretch
    • 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