CSS flex布局总结

327 阅读8分钟

flex布局的适用场景

flex 布局适用于应用程序的组件和小规模布局 (grid 布局适用于大规模布局)

水平方向上的起始和终止方向的概念

世界上的语言有两种书写方向(包括:从左向右、从右向左),而渲染不同书写方向的语言的网页在设置flex布局的水平轴属性时会有所区别,这两种书写方向如下:

  • LTR: left to right. 语言书写的方向是从左向右。所以在水平方向上的起始方向是左,终止方向是右(一般用于大部分语言,例如:汉语,英语、法语、西班牙语、德语等)
  • RTL: right to left. 语言书写的方向是从右向左。所以在水平方向上的起始方向是右,终止方向是左(一般有4种常见语言:阿拉伯语,希伯来语,波斯语,乌尔都语)
    • 阿拉伯语: 阿拉伯国家
    • 波斯语:伊朗、塔吉克斯坦
    • 希伯来语:犹太人(例如:以色列)
    • 乌尔都语:巴基斯坦 后文会使用到 "水平方向上的起始方向"和 "水平方向上的终止方向" 这两个概念。

flex布局的基本概念

image.png

  1. flex容器和flex容器内的孩子

    • 弹性容器(flex container):设置了布局方式为 flex 或 inline-flex 的元素
    • 弹性元素(flex item),是弹性容器内的子元素
  2. flex容器内的坐标轴:

    • 坐标轴按主次关系分类:
      • 主轴(main axis)
      • 辅轴,也叫侧轴、交叉轴(cross axis)
    • flex item 在主轴上的摆放顺序:
      • flex item 在 flex容器内水平方向上的摆放分类:
        • flex item 在容器内从横轴的起始向终止方向摆放:row (和 row-reverse 是左右镜像对称的关系)
        • flex item 在容器内从横轴的终止向起始方向摆放:row-reverse (和 row 是左右镜像对称的关系)
      • flex item 在 flex容器内垂直方向上的摆放分类:
        • flex item 在容器内从上向下摆放:column (和 column-reverse 是上下镜像对称的关系)
        • flex item 在容器内从下向上摆放:column-reverse (和 column 是上下镜像对称的关系)

flex布局的相关css属性

  1. 为一个盒子设置使用flex布局
    • 设置对象:flex container
    • 代码:display: flexdisplay: inline-flex

主轴相关的属性

  1. 设置flex item在主轴上的摆放方向

    • 设置对象:flex container
    • 属性:flex-direction (或者 flex-flow 两个数值中的第一个值)
    • 常用数值:
      • row: **【默认值】**主轴是横轴,辅轴是纵轴。flex item 在容器内从横轴的起始向终止方向摆放
      • row-reverse: 主轴是横轴,辅轴是纵轴。flex item 在容器内从横轴的终止向起始方向摆放
      • column: 主轴是纵轴,辅轴是横轴。flex item 在容器内从上向下摆放
      • column-reverse: 主轴是纵轴,辅轴是横轴。flex item 在容器内从下向上摆放
  2. 设置当flex item数量过多时是换行显示还是不换行从容器中溢出

    • 设置对象:flex container
    • 属性:flex-wrap (或者 flex-flow 两个数值中的第二个值)
    • 常用数值:
      • nowrap: **【默认值】**不换行。即:无论flex item的数量有多少,所有的 flex item 都必须在一行内显示,即使显示不下而从 flex 容器中溢出也不换行。

        image.png

        image.png

      • wrap: 从上向下可换行的显示。当flex item数量过多显示不下时允许换行显示,避免从flex容器中溢出。

        image.png

        image.png

      • wrap-reverse:从下向上可换行的显示。当flex item数量过多显示不下时允许换行显示,避免从flex容器中溢出。

        image.png

  3. 同时设置 flex item在主轴上的摆放方向,和 flex item数量过多时是换行显示还是不换行从容器中溢出

    • 设置对象:flex container
    • 属性:flex-flow (直译为"flex流", 含义是 flex item的流动策略设置, 包括了 flex item的流动方向和当流动到容器内的行尾时是否换行的策略,相当于同时设置 flex-directionflex-wrap)
    • 默认值:row nowrap
  4. 设置 flex item 在主轴上的摆放位置

    • 设置对象:flex container
    • 属性:justify-content
    • 常用数值:
      • normal: 【默认值】
      • center: 在主轴方向上居中, item之间默认紧挨(没有空白空间) image.png
      • flex-start: flex item 紧挨主轴的起始方向 image.png
      • flex-end: flex item 紧挨主轴的结束方向 image.png
      • space-around: 每个flex item在主轴方向上各自周围单方向的空白空间相等 image.png
      • space-between: 每个flex item在主轴方向上各自周围单方向的空白空间相等,但起始 item 和结束的item 各自紧挨 flex container 的一条边框(不留空白空间) image.png
      • space-evenly: 等效解释为:如果各 flex item 存在外边距合并的效果,那么各外边距都相等。
        image.png

辅轴相关的属性

  • 设置 flex item 的整体在辅轴上相对于容器的位置:
    1. 一刀切式地为所有 flex item 设置在辅轴上他们组成的整体相对于容器的位置:
      • 设置对象:flex container
      • 属性:align-items
      • 常用数值:
        • center: flex item 在侧轴居中。如果元素在侧轴上的高度高于其容器,那么在两个方向上溢出距离相同。
          image.png
        • stretch: flex item 在侧轴方向被拉伸到与容器相同的高度或宽度。但当设置了 max-width,max-height 时,则 max-width,max-height 的权重更高。 image.png
        • flex-start:所有 flex item 向侧轴起点对齐。
          image.png
        • flex-end: 所有 flex item 向侧轴终点对齐。
          image.png
        • baseline: 所有 flex item 相互之间按照基线对齐。 image.png
    2. 单独为某个或者某一些 flex item 设置在辅轴上各自相对于容器的位置:
      • 设置对象:flex item
      • 属性:align-self
      • 说明:其数值会覆盖已有的 align-items 的值
      • 常用数值:与 align-items 的相同。
    3. align-content:
      • 设置对象:flex container
      • 功能和 align-items 的区别是:
        • align-items: 是将items作为一个整体,设置的是这个整体在容器内的位置(这个整体的总宽/高度不变,不会被压缩或拉伸),但却不会设置这个整体内部各行/列之间的行/列间距(这个行/列间距需要由 align-content 来设置)。
        • align-content:功能和 align-items 互补。设置的是 items 内部各行之间的行/列间距,即:这个整体的宽/高度会被压缩或拉伸。所以当 items只有一行/列时,设置 align-content 将不起任何效果. (摘自 flexboxfroggy.com/)

flex item 相关的属性

  1. flex item 实际在页面上的展示的相对位置关系
    • 设置对象:flex item
    • 属性:order
    • 数值区间:正负数,0(数值越大,在页面上的展示顺序就越靠近主轴的正方向)
  2. flex item 在主轴上占据空间的百分比分布
    • 设置对象:flex item
    • 属性:
      • flex (是 flex-grow, flex-basis, flex-shrink三者的集合缩写形式)
      • flex-grow: 该flex item对主轴上剩余空间所分得的相对份额数
      • flex-basis: 一个具体的尺寸值,表示各 flex item 在主轴方向上首先至少要获得的尺寸数值,先把各item的 flex-basis 分配给各自,分配完以后,对主轴上剩余的空间,按照各item的 flex-grow 所对应的份额去分配给各 item。这样的话,剩余空间被所有 flex item 瓜分掉。而每个flex item在主轴上的尺寸由两部分构成:该 flex item的 flex-basis尺寸和该 flex item 通过 flex-grow所分得的剩余空间的尺寸。
      • flex-shrink:flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。默认值1。

总结

  1. floatclearvertical-align 对 flex item 无效

  2. flex container 和 flex item 各自适用的与flex相关的 css 属性:

    • 适用于 flex container 且与 flex 相关的 css属性:
      • display
      • flex-flow(flex-direction, flex-wrap)
      • justify-content
      • align-items
      • align-content
    • 适用于 flex item 且与 flex 相关的 css属性:
      • order
      • flex(flex-grow, flex-shrink, flex-basis )
      • align-self
  3. flex item 对主轴剩余空间的两种管理策略

    • 瓜分剩余空间的策略。即:主轴上的剩余空间会按照各 flex item设置的瓜分百分比进行瓜分,每个flex item在主轴方向的尺寸是自己的原尺寸加上瓜分剩余空间所得到的尺寸,所以 flex item 在主轴方向上的尺寸可能会变大。 如果有此需求,可以使用 flex-grow 或缩写 flex 来设置。
    • 不瓜分剩余空间,而只是调整 flex item 在主轴方向上的摆放位置的策略。即:flex item 在主轴方向的尺寸不变,而只是让自己在主轴上移动到一个更合适的位置去摆放,以便符合 justify-content 的要求。 如果有此需求,需要禁止使用 flex-growflex , 同时要对 flex 容器使用 justify-content 来设置flex item 在主轴上的摆放位置。

    举例:

    <section>
         <p>1</p>
         <p>2</p>
         <p>3</p>
    </section>
    
    section {
        background-color: lightblue;
        max-width: 500px;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }
    
    p {
        border: 1px solid blue;
        width: 10px;
        color: black;
    }
    

    上述代码设置了 justify-content 并且 flex item 没有设置 flexflex-grow, 则效果为不瓜分剩余空间,而是按照justify-content 的要求来摆放,显示效果如下:

    image.png

    如果上述代码为 p 元素设置 flex: 1; 或者 flex-grow: 1;,代码如下:

    p {
        flex: 1; /* 或者 flex-grow: 1; */
    }
    

    则显示效果变为:各个 p 元素将水平方向上的剩余空间全部瓜分掉,显示效果如下:

    image.png

flex练习的小游戏

  • 通过编写与 flex 相关的CSS代码,让青蛙们能够跳到与各自颜色相对应的荷叶上的游戏。通过编写游戏代码,来辅助熟悉与 flex 相关的 css属性:
    flexboxfroggy.com/

参考资料