【CSS】一文速查复习flex布局相关所有属性

Hsiao
1,231 阅读9分钟

flex 布局速查

作为本强迫症福音，flexbox 被本人拿来写样式的使用频率极高，正愁没把所有flexbox的知识点整合，这次趁机会把会用到的所有flexbox相关知识罗列出来，方便查找并使用。

排序和换行

flex-direction

属性指定了内部元素是如何在flex容器中布局的，定义了主轴的方向 (正方向或反方向)。

取值:

  • row（初始值）
  • row-reverse
  • column
  • column-reverse

如果选择了 row 或者 row-reverse，你的主轴将沿着 inline 方向延伸。

选择 column 或者 column-reverse 时，你的主轴会沿着上下方向延伸 — 也就是 block 排列的方向。

flex-wrap

属性指定flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

取值:

  • nowrap（初始值）

    flex的元素被摆放到到一行，这可能导致flex容器溢出。

  • wrap

    flex元素 被打断到多个行中

  • wrap-reverse

    和 wrap的行为一样，但是头尾互换。image-20221115191717892

flex-flow

属性是 flex-direction 和 flex-wrap 的简写。

你可以将两个属性 flex-direction 和 flex-wrap 组合为简写属性 flex-flow。第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap

初始值：flex-direction:row 和 flex-wrap:nowrap

order

属性指定单个项目并更改其在视觉顺序中的显示位置

备注： order 仅仅对元素的视觉顺序 (visual order) 产生作用，并不会影响元素的逻辑或 tab 顺序。 order 不可以用于非视觉媒体，例如speech。

取值：用一个数字表示此可伸缩项目所在的次序组（默认为0）

例如，我有 5 个弹性条目，并按如下所示分配order值：

  • Source item 1: order: 2
  • Source item 2: order: 3
  • Source item 3: order: 1
  • Source item 4: order: 3
  • Source item 5: order: 1

这些项目将按以下顺序显示在页面上：

  • Source item 3: order: 1
  • Source item 5: order: 1
  • Source item 1: order: 2
  • Source item 2: order: 3
  • Source item 4: order: 3

flex 元素上的属性

flex-basis

属性指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

备注： 当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级。

取值：

  • <'width'>

    width 值可以是一个数值; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数 。负值是不被允许的。默认为 auto。

  • content

    基于flex的元素的内容自动调整大小。

    备注： 由于最初规范中没有包括这个值，在一些早期的浏览器实现的 flex 布局中，content 值无效，可以利用设置 (width 或 height) 为 auto达到同样的效果。

flex-grow

属性设置 flex 项 主尺寸的 flex 增长系数。

取值： 正数，负值无效，默认为 0。

flex-grow 若被赋值为一个正整数，flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。

如果我们给所有元素设定 flex-grow 值为 1，容器中的可用空间会被这些元素平分。它们会延展以填满容器主轴方向上的空间。

上图：

如果A、B、C、F元素 flex-grow 值为1

D、E元素 flex-grow 素 flex-grow 值为 2

则A、B、C、F元素将各占有1/8，D、E元素各占有 2/8。（8=1+1+1+2+2+1）

flex-shrink

属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

在计算flex 元素收缩的大小时，它的最小尺寸也会被考虑进去，就是说实际上flex-shrink 属性可能会和 flex-grow 属性表现的不一致

取值： 正数，负值无效，默认为 1。

直接上图：

image-20221115171630960

假设全部空间为500px，flex-basis设为128px

那么本应该是128*5=640px，所以要压缩640-500=140px。

若A、B、C元素 flex-shrink 值为1 ，D、E元素 flex-shrink值为 2

A、B、C元素各压缩了1/7（140/7=20），D、E元素各压缩了2/7（20*2=40）

A、B、C元素变成128-20=108px，D、E元素变成了128-40=88px

验证：

image-20221115171652672

备注： 给父盒子加入前面学习的允许换行属性flex-wrap: wrap，可以获得一个煎饼式布局

jianbing.gif

flex

属性是以下 CSS 属性的简写：flex-grow、flex-shrink、flex-basis

取值： 可以使用一个，两个或三个值来指定 flex属性。

单值语法： 值必须为以下其中之一：

  • 一个无单位数: 它会被当作 flex:<number> 1 0 ，它会被当作flex-grow的值

  • 一个有效的 width值：它会被当作flex-basis的值

  • 关键字none，auto或initial

    • initial

      元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"flex: 0 1 auto"。

    • auto

      元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".

    • none

      元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应flex 容器。相当于将属性设置为"flex: 0 0 auto"。

双值语法： 第一个值必须为一个无单位数，它会被当作flex-grow的值。第二个值必须为以下之一：

  • 一个无单位数：它会被当作flex-shrink的值。
  • 一个有效的宽度值：它会被当作flex-basis的值。

三值语法：

  • 第一个值必须为一个无单位数，它会被当作flex-grow的值。
  • 第二个值必须为一个无单位数，它会被当作flex-shrink的值。
  • 第三个值必须为一个有效的宽度值，它会被当作flex-basis的值。

备注： 在给 flex-grow 和 flex-shrink 赋值时要注意比例。如果我们给所有元素的 flex 属性赋值为 1 1 200px ，并且希望其中一个元素可以增加到 2 倍，我们可以给该元素的 flex 属性赋值为2 1 200px

当然，你也可以选择赋值为 flex: 10 1 200px 和 flex: 20 1 200px

元素间的对齐和空间分配

justify-content

属性定义了主轴上的对齐方式

取值：

  • flex-start（首选） / start

    从行首开始排列

  • flex-end（首选） / end

    从行尾开始排列

  • center

    伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。image-20221115193426203

  • space-between

    均匀排列每个元素且首个元素放置于起点，末尾元素放置于终点image-20221115193400823

  • space-around

    均匀排列每个元素且每个元素周围分配相同的空间image-20221115193514395

  • space-evenly

    均匀排列每个元素且每个元素之间的间隔相等image-20221115193551330

  • stretch

    均匀排列每个元素且'auto'-sized 的元素会被拉伸以适应容器的大小

  • safe

    与对齐关键字一起使用，如果选定的关键字会导致元素溢出容器造成数据丢失，那么将会使用 start 代替它

  • baseline / first baseline / last baseline

    基线对齐

  • left

    伸缩元素一个挨一个在对齐容器得左边缘，如果属性的轴与内联轴不平行，则left的行为类似于start。

  • right

    元素以容器右边缘为基准，一个挨着一个对齐，如果属性轴与内联轴不平行，则right的行为类似于end。

align-items

属性定义了副轴上的对齐方式 （单行）

常用取值：

  • flex-start

    从行首开始排列image-20221115193139311

  • flex-end

    从行尾开始排列image-20221115193148928

  • center

    伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。image-20221115193129315

  • stretch

    均匀排列每个元素且'auto'-sized 的元素会被拉伸以适应容器的大小image-20221116153352468

align-self

属性允许单个项目有与其他项目在侧轴上不一样的对齐方式，可覆盖align-items属性

取值：

  • auto

    设置为父元素的align-items属性值

  • normal

    效果取决于当前的布局模式：

    • 绝对定位布局中，normal 在绝对定位的替代元素上表现为start，在所有其他绝对定位元素上表现为stretch。
    • 在绝对定位的静态元素上表现为stretch。
    • 在flex布局中表现为 stretch。
    • 在grad布局中，normal导致的行为类似于stretch，除了具有纵横比或固有大小的框，它的行为类似于start。
    • 在块级和表格单元中无效。

  • flex-start

    从行首开始排列

  • flex-end

    从行尾开始排列

  • center

    伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。image-20221115192138969

  • stretch

    均匀排列每个元素且'auto'-sized 的元素会被拉伸以适应容器的大小image-20221115192239314

align-content

属性设置子项在侧轴上的排列方式 （多行）

取值：

  • flex-start

    从行首开始排列

    image-20221115192723082

  • flex-end

    从行尾开始排列

  • center

    伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。image-20221115192731261

  • stretch

    均匀排列每个元素且'auto'-sized 的元素会被拉伸以适应容器的大小

  • space-between

    均匀排列每个元素且首个元素放置于起点，末尾元素放置于终点image-20221115192747246

  • space-around

    均匀排列每个元素且每个元素周围分配相同的空间image-20221115192837572

参考文献

MDN中文文档：developer.mozilla.org/zh-CN/

avatar
文章
阅读
粉丝