Web前端：CSS篇（三）盒子模型，弹性盒子

显示

这定义了一个 flex 容器;inline 或 block，具体取决于给定的值。它为其所有直接子项启用了灵活的上下文。

.container {
  display: flex; /* or inline-flex */
}

请注意，CSS 列对 flex 容器没有影响。

弯曲方向

这样就建立了主轴，从而定义了 flex 物品在 flex 容器中的放置方向。Flexbox 是（除了可选的包装）单向布局概念。将弹性项目视为主要在水平行或垂直列中布局。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认）：从左到右;从右到左输入ltrrtl
• row-reverse： 从右到左 ;从左到右ltrrtl
• column：相同，但从上到下row
• column-reverse：相同，但从下到上row-reverse

弹性包裹

默认情况下，flex 项目将尝试适合一行。您可以更改该属性，并允许项根据需要使用此属性进行包装。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（默认）：所有 Flex 项目将位于一行上
• wrap：弹性项目将从上到下包裹在多条线上。
• wrap-reverse：Flex 项目将从下到上包裹在多条线上

弹性流动

这是 和 属性的简写，它们共同定义 flex 容器的主轴和十字轴。缺省值为 。flex-directionflex-wraprow nowrap

.container {
  flex-flow: column wrap;
}

justify-content（justify-content）

这定义了沿主轴的对齐方式。当生产线上的所有 flex 项目都不灵活，或者是灵活的但已达到其最大尺寸时，它有助于分配剩余的额外可用空间。当项目溢出行时，它还对项目的对齐方式进行一些控制。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start（默认）：物品在朝向弯曲方向的起点进行包装。
• flex-end：物品在弯曲方向的末端进行包装。
• start：物品在朝方向的起点处打包。writing-mode
• end：物品在方向的尽头打包。writing-mode
• left：物品被打包到容器的左边缘，除非这与 没有意义，否则它的行为类似于 。flex-directionstart
• right：物品被打包到容器的右边缘，除非这与 没有意义，否则它的行为类似于 。flex-directionend
• center：项目沿线居中
• space-between：物品均匀分布在队伍中;第一项在起始行，最后一项在结束行
• space-around：项目均匀地分布在行中，它们周围有相等的空间。请注意，从视觉上看，空间并不相等，因为所有项目的两边都有相等的空间。第一项与容器边缘之间的空间单位为一个空间，但下一项之间有两个空间单位，因为下一项有自己的适用间距。
• space-evenly：对项目进行分布，使任何两个项目之间的间距（以及到边缘的空间）相等。

请注意，浏览器对这些值的支持是微妙的。例如，从未获得某些版本的 Edge 的支持，并且 start/end/left/right 尚未在 Chrome 中。MDN。最安全的值是 、 和 。space-betweenflex-startflex-endcenter

您还可以将另外两个关键字与这些值配对：和 。使用 可以确保无论执行哪种定位方式，您都不能推送元素，使其呈现在屏幕外（例如，从顶部），从而使内容也无法滚动（称为“数据丢失”）。safeunsafesafe

对齐项目

这定义了弹性项目在当前线上沿十字轴布局方式的默认行为。将其视为十字轴（垂直于主轴）的版本。justify-content

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch（默认）：拉伸以填充容器（仍尊重最小宽度/最大宽度）
• flex-start / start / self-start：项目放置在十字轴的起点。这两者之间的区别是微妙的，是关于尊重规则或规则的。flex-directionwriting-mode
• flex-end / end / self-end：将物品放置在十字轴的末端。区别又是微妙的，是关于尊重规则与。 规则。flex-directionwriting-mode
• center：项目在十字轴上居中
• baseline：项目对齐，例如其基线对齐

and 修饰符关键字可以与这些关键字的所有其他关键字结合使用（尽管请注意浏览器支持），并帮助您防止对齐元素以使内容变得无法访问。safeunsafe

对齐内容

当十字轴上有额外空间时，这会将柔性容器的线对齐内部，类似于在主轴内对齐单个物品的方式。justify-content

注意：此属性仅在多行灵活容器上生效，其中设置为 either 或 ）。单行灵活容器（即 where 设置为其默认值 ）将不会反映 。flex-wrapwrapwrap-reverseflex-wrapno-wrapalign-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• normal（默认）：项目在其默认位置打包，就像未设置任何值一样。
• flex-start / start：将物品包装到容器的开头。（支持越多）尊重方向，而尊重方向。flex-startflex-directionstartwriting-mode
• flex-end / end：包装到容器末端的物品。（更多的支持）尊重，而结束尊重方向。flex-endflex-directionwriting-mode
• center：容器中的项目居中
• space-between：物品均匀分布;第一行位于容器的开头，最后一行位于容器的结尾
• space-around：项目均匀分布，每行周围空间相等
• space-evenly：物品均匀分布，周围空间相等
• stretch：线条伸展以占据剩余空间

and 修饰符关键字可以与这些关键字的所有其他关键字结合使用（尽管请注意浏览器支持），并帮助您防止对齐元素以使内容变得无法访问。safeunsafe

间隙、行间隙、列间隙

gap 属性显式控制 flex 项之间的空间。它仅适用于不在外边缘的项目之间的间距。

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

该行为可以被认为是最小的排水沟，如果排水沟以某种方式更大（因为类似的东西），那么只有当该空间最终变小时，间隙才会生效。justify-content: space-between;

它不仅适用于 flexbox，也适用于网格和多列布局。