CSS Flexbox布局深度剖析

自从flex-box出来之后，似乎一切都突然变得清晰起来。有多种水平和垂直对齐方式，位置由您决定。当然，想要用好并不容易。今天我要给大家讲讲弹性盒布局。读完本文，你一定能熟练使用！

启用 Flexbox 布局

假设您有以下 html 结构： div，childd排列容器根据默认布局包含三个❙di 元素。由于 div 是块级元素，因此每个 div 占据一整行：

如果您只想启用容器布局，请在 css 中使用 。 flex设置display:flex属性，为了演示效果，我添加了100px的高度：

display: flex;
height: 100px;
复制代码

可以看到里面的三个元素自动变成了line，因为flex默认是line安排。 Flexbox 布局是按行或列排列的一维布局。

对齐

灵活的布局包括具有水平主轴和垂直交叉轴的隐式坐标空间：

justify-content

（主轴控制。水平方向）使用justify-content 用于对齐。属性，有以下对齐模式：

flex-start

flex-start

flex-start是左向右文本阅读（LTR）的默认值-对齐。由于默认对齐方式，与上面的示例相比没有任何区别：

justify-content: flex-start;
复制代码

center

居中对齐，则整个 Flexi 容器居中于页面中间：

flex-end

右alignment:

center - Between

两端对齐，这种对齐方式是第一个和最后一个元素有边框，中间元素均分剩余空间：

space-evenlydistribution ，所有元素都均等分割空间：

around

与均匀类似，但左右两侧的空白为分割空间的1/2。

align-items

控制相交轴向对齐方法（即垂直方向）使用align-items属性。以下是几种对齐方法：

stretch

stretch align-items 默认为 ，因此容器中子项的高度将自动拉伸前面的示例。 ，子元素垂直填充容器。只要容器中align-items的值发生变化，就会是内容的高度。 拉伸对齐效果为：

flex-start

顶部对齐。在横轴的顶部，可以看到子元素不再占据容器的宽度：

middle

居中对齐：

flex-end

❀bottom❙

Baseline对齐 如果子元素的文本大小和行高不同，则子元素与文本的基线对齐：

.flex2 {
  font-size: 24px;
}
复制代码

Ha flex-start 对齐：

align-content

当我们在下面讨论换行符时，本节将展示这一点。

子元素覆盖对齐

子元素可以通过 Set align-self

在横轴上对齐，例如可以对齐子元素❙3。垂直轴下方的元素：

.flex {
  display: flex;
  align-items: flex-start;
}

.flex3 {
  align-self: flex-end;
}
复制代码

控制子元素的水平对齐方式。没有 justify-self 属性，但用于控制 margin left 或 left 属性。右边距 auto，例如 flex3 放置在右边缘：

.flex3 {
  margin-left: auto;
}
复制代码

布局模式

flex 布局。成列排列时，主轴和横轴改变方向，但对齐项控制的轴和对齐内容保持不变，即align-items

仍然控制横轴， justify-内容 主轴控制：

所以水平方向对齐是align-items，垂直方向是t justify。

对于灵活的列布局，您只需设置以下行和列布局，与基于容器中心线翻转180度相同：

行翻转

.flex {
  display: flex;
  flex-direction: row-reverse;
}
复制代码

列翻转

列模式将垂直翻转：

♝ 可以使用 flex 属性设置子元素来调整间距比例。例如，让 flex2 水平占据其他子元素大小的两倍。可以设置：简介中的

.flex1,
.flex3 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
复制代码

Flex-basis

在flex-basis之前，先说一个概念主尺寸，即主轴方向上的尺寸。那么在 row 模式下，即水平尺寸实际上是子元素的宽度，在 In 模式列中则是子元素的高度，对应的十字尺寸为 ，即在 row 模式下它是子元素的高度，在列模式下它是其宽度。而flex-basis用于设置主尺寸，其优先级将高于宽度。 其默认值为auto，即在行模式下，如果设置了子元素的宽度，则取自该宽度值。如果未设置，则为内容的宽度。使用 flex-basis 您可以管理行模式下的宽度和列模式下的高度。

让我们看一个例子。将之前的子元素更改为固定宽度，例如200px：

.flex > * {
  flex-basis: 200px;
}
复制代码

这样每个子元素的宽度将是200px：

wisz如果添加以下属性：❀ d我们发现没有生效：

.flex > * {
  flex-basis: 200px;
  width: 250px;
}
复制代码

但是，您可以通过设置min-width强制最小宽度：

.flex > * {
  flex-basis: 200px;
  min-width: 250px;
}
复制代码

同样在列模式下，高度将为flex base，因为容器高度为100px，这里子元素高度30px，总共❀❙❀❀效果：

.flex {
  flex-direction: column;
}

.flex > * {
  flex-basis: 30px;
}
复制代码

同样可以用控制最小高度分钟-高度

。

Scale

（后面的例子假设为行模式）上一部分简单讲了flex子元素的空间比例。这里突出显示大小是为了说明：除了调整 flex 子元素的增长之外，还可以调整收缩，以及 flex 属性背后的推理（下一节）。

flex-grow

我们先看增长，flex-grow。该属性是指如果还有空间的话，灵活容器的子元素所占用的剩余空间的比例。例如设置子元素.flex2：

.flex2 {
  flex-grow: 1;
}
复制代码

其他元素保持默认宽度（即内容的宽度，flex-basis自动），则.flex2 自动增大并占据整个剩余区域：

如果将所有三个元素设置为 1，则所有元素将自动增长并占据该区域的 1/3：

使用 的长宽比元素可自由调节，非常适合某些浮动布置。

flex-shrink

收缩子元素是关于当其宽度超过flex容器时如何收缩。使用 flex-shrink 设置值。值越高，收缩量越大。例如，flex-shrink: 2元素将小于flex-shrink: 1收缩值是舒适度的两倍：演示，主要尺寸（宽度） ）所有 Flex 子元素）我将其设置为 600 像素。在我的显示器下，flex容器的宽度是728px，三个子元素总共1800px，明显超过了容器的宽度。根据上面定义的收缩规则，.flex2 的收缩量是 .flex 和 .flex❙ 的两倍。在下面的示例中，与 0 相比，.flex1 和 .flex3 将是 332px

display: flex;
height: 100px;
复制代码

332px， 缩小至268 ，然后.flex2 536px 宽度 (268px * 2)

（最终结果为 60

）

：

.data-src="https://user-gold-cdn.xitu.io/2020/4/6/1714e8fe572e7c2a?imageView2/0/w/1280/h/960/format/webp /ignore -error/1" height ="20" data-width="1280" data-height="173" />

我们来谈谈 Flexi 功能

完成 flex-grow flex -growflex-shrink 和 flex-basis 之后，我们再看看属性flex，它实际上是前面三个值的缩写。收缩比为1，flex-basis为auto，超出用户定义的宽度或内容的宽度。1，相当于 flex: 1，缩放11，比例 1，弯曲底座 0。

auto - 对应于 flex: 1 1 auto 。

给出两个数字 - 第一个 flex-grow，第二个如果是数字，则为 flex -bas -bass❙❙（如果宽度 flex

justify-content: flex-start;
复制代码

）。

提供三个值​​– flex-grow、flex-shrink和❙❙‼

flex属性方便您可以将 ​​flex-grow

、❀ flex-based 合二为一 这是三个值。

Wrap

如果子元素的宽度是固定的，超过了容器的宽度，不应该收缩，可以使用 flex-wrap属性让元素可以换行，这样每行元素不应超过容器的宽度。 它与 CSS 网格布局的主要区别在于，你无法单独控制行和列的比例，例如行和列之间的比例，并且你无法自由地将元素放置在特定位置。下面的示例添加了 2 个新元素，总共 5 个。每个元素的主尺寸是300像素，超过宽度之后就打包了：

.flex {
  flex-wrap: wrap;
}

.flex > * {
  flex-shrink: 0;
  flex-basis: 300px;
}
复制代码

align-content

如果flex容器开启滚动，那么这两行和上面的内容就是可以通过属性来控制align-content，以控制横轴上行之间的布局规则。它的值与justify-content基本相同。这里是其中的一些。或者使用前三项中的弹性容器。每个容器的宽度为 300px，并在以下溢出后换行：

.flex {
  display: flex;
  flex-wrap: wrap;
}
.flex > * {
  flex-basis: 300px;
}
复制代码

center

垂直居中：

center- Between

Innesdsetsset。 如果HTML A的结构比较复杂，并且有内嵌的flex容器，那么内嵌的flex容器很可能无法自动收缩，即使flex-shrink。例如，有以下html结构：

<div class="flex">
  <div class="flex1">Flex 1</div>
  <div class="flex2">Flex 2</div>
  <div class="flex3">Flex 3</div>
  <div class="flex4">
    <p>
      这是一段很长很长很长很长很长很长很长很长很长很长很长很长长很长很长很长很长很长长很长很长很长很长很长的文本
    </p>
  </div>
</div>
复制代码

这里一个新的子元素.flex4被添加到之前的flex容器中。这四个子元素设置为 flex: 1 以将它们均分。空间，但 .flex4 本身就是一个 flex 布局容器。它有很长的一行文字。我希望它在太长时自动显示省略号。它的 CSS 是

.flex {
  display: flex;
}
.flex > * {
  flex: 1;
}
.flex4 {
  display: flex;
  flex: 1;
}
.flex4 > p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
复制代码

如你所见，.flex4，本来应该占据 1/4 的空间，直接拉伸了 Flex 容器，因为文本无法换行并压扁了另一个三个子元素的空间最小。文本应被截断并出现省略号。这是为什么？原来，flex容器min-width属性值是auto，是浏览器自己计算的。这里取元素

的宽度，所以宽度就是整条线A

的宽度。所以，要解决这个问题，可以将嵌入的flex容器.flex4 的min-width更改为 ，即可以正常收缩现在：

.flex4 {
  display: flex;
  flex: 1;
  min-width: 0;
}
复制代码

总结

至此，完整的柔性布局就实现了。还有很多事情要做，但并不困难。我想你可以通过例子来学习如何使用它。让我们总结一下最重要的信息：

• 启用灵活布局并使用 display: flex 属性。
• flex 布局具有主轴和横轴，并使用 justify-content 和 align-items 进行对齐。
• 支持弯曲方向按行或列布局，并支持线反转和♹和❙布局。
• 子元素，缩写为 flex 或 flex-grow、❀❙❙、

  display: flex;
  height: 100px;
  复制代码

  flex-base 是纵横比和缩放比例的元素。

• 使用flex-wrap将flex子元素设置为换行。
• 嵌套 flex 容器存在缩放问题。

作者：风华
链接：https://juejin.im/post/5e8ae27df265da47f144a8db
来源：掘金商业转载请联系作者授权。非商业转载请注明来源。