Flexbox 的 80/20

本文旨在解释您在 80% 的时间里会使用的 20% 的 flexbox。

什么是 Flexbox？

弹性盒布局 (Flexbox) 是一种描述元素在另一个元素内部如何显示的方式。外部元素称为弹性盒容器 (Flexbox container)，内部元素称为弹性盒项目 (Flexbox items)。

它是如何工作的？

弹性盒容器是通过在其上添加一个display值为 的 CSS 属性来创建的flex。此容器内的任何直接子元素都会自然成为弹性项目。弹性项目本身也可以是其子元素的弹性容器，但请将其视为完全独立的弹性盒关系。弹性盒关系始终是父元素与一个或多个子元素之间的单层关系。

声明 flexbox 容器后，所有 flex 项目将默认水平放置并排放置，从左侧开始延伸到容器的高度。

Flexbox 容器属性

要指定弹性项目是水平布局还是垂直布局，您可以将该flex-direction属性设置为row(水平默认) 或column(垂直)。此外，还有反向的 "row" 和 "column" 选项可用，它们将水平布局弹性项目（从右到左 ( row-reverse)）或垂直布局column-reverse（假设您使用水平从左到右的书写模式）。

假设您使用默认声明。要指定项目在水平轴（称为主轴flex-direction: row）上的放置方式，请考虑您在富文本编辑器中通常使用的对齐选项，例如左对齐、右对齐或居中。在弹性盒子中，您可以使用容器上的 属性来执行相同操作。默认设置是将项目与主轴的起点对齐。其他可能的值包括、您最好的朋友、较少使用的和。justify-contentjustify-content: flex-startflex-endcenterspace-betweenspace-aroundspace-evenly

要指定如何将弹性项目垂直放置在容器中的交叉轴上，可以使用align-items属性。可用值与 的值非常相似justify-content，但有几点例外：flex-start、flex-end、和。默认情况下，弹性项目将center拉伸容器的整个高度。要将项目放置在交叉轴的顶部或底部，请分别使用或。传统上，仅使用 CSS 垂直居中项目非常困难，但使用 flexbox，您可以设置并收工。该选项值得了解，但您不常用。如果您有相邻的弹性项目包含不同大小的文本，并且您想要基于文本底部对齐它们，请使用。stretchbaselineflex-startflex-endalign-items: centerbaselinebaseline

你是否注意到，我们已经满足了大多数布局需求，而且到目前为止，我们还没有在任何弹性项目上指定任何 CSS 属性？所有内容都集中在弹性容器上。太神奇了。

话虽如此，如果您需要单独对齐项目，则可以align-self在项目上设置属性。它会采用容器align-items支持的所有可用值。

值得再次指出的是，到目前为止的所有示例都假设使用从左到右的书写模式和默认的水平行 flex-direction。当其中任何一个发生变化时，概念保持不变，只有你的视角会发生变化。我的意思是，在使用 的从右到左的书写模式下flex-direction: column-reverse，项目将沿主轴从下到上对齐，但现在沿横轴从右到左对齐。

我发现，先使用标准布局更容易掌握基础知识flex-direction: row。之后，你可以在脑海中交换 flexbox 的轴，以直观地了解反转列是如何工作的。

最后一个值得一提的 flexbox 容器属性是flex-wrap。默认情况下，当 flex 元素用完水平空间时，它们不会换行到新行。它们会尽可能地紧密地挤在一起，直到 CSS 布局引擎认为空间足够为止。

要让这些项目自动换行到新行，请设置flex-wrap: wrap。正如我所提到的，默认值为flex-wrap: nowrap。

以上就是我们要讨论的所有容器属性。其余属性都是针对单个弹性项目设置的。

弹性框项目属性

弹性项目舒适地挤压在一起的行为可以通过flex-shrink属性覆盖。此属性规定了当空间不足时，项目在容器内收缩的比例。默认值为flex-shrink: 1，表示所有项目均等收缩。如果将其中一个项目设置为 ，flex-shrink: 2而其余项目保持 的值1，则该项目的收缩速度将加快一倍。需要注意的是， 值是一个无单位值，表示收缩比例，而不是10px或 之类的值50%。

与弹性项目舒适的收缩行为相反，它们本质上往往有点害羞，如果有任何可用空间，它们不会“占据所有空间”。用更正式的术语来说，所有弹性项目都有一个setflex-grow值0，这限制了它的增长。就像 一样flex-shrink，flex-grow是一个无单位值，它决定了如果有任何可用空间，项目在容器内应按多大比例增长。重要的是要注意，如果你有两个弹性项目，一个的值为flex-grow，1另一个的值为2，这并不意味着一个项目会是另一个项目的两倍。这意味着，从所有可用空间（如果有）中，一个项目将获得两部分，另一个项目获得一部分。

我们将要介绍的最后一个弹性项目属性是flex-basis。你可以将其视为flex-basis项目沿主轴的宽度。此属性需要使用任意标准 CSS 单位设置，例如px、rem、%、vw等。默认值为 ，flex-basis: auto这意味着该项目的宽度等于其所包含内容的宽度，类似于display: inline-block元素的宽度。

这条规则的一个注意事项是width，当指定了时，width会优先于 默认的flex-basis: auto。另一件需要注意的事情是，如果你min-width同时指定了 和非默认的flex-basis， 则min-width始终会优先。

当然，弹性盒子还有很多其他功能，比如我们之前提到的一些属性的简写语法。等你熟悉了这些之后，就可以继续深入学习了。

最初发表于 https://jperasmus.me。