掌握Flexbox：维度控制及尺寸分配

2023-12-10 07:53:12

好的，咱们接着上一篇关于Flexbox的讨论，已经学过Flexbox的基本对齐方式了，现在咱们来探讨一下项目（也就是容器里的单个子元素）的尺寸应该如何控制。同时，我也会介绍一下浏览器在默认情况下是如何分配项目尺寸的。

为了方便演示，假设我们有这样一些文本内容不等的元素……

<div class="container">
  <div class="item">这是一段较长的文本内容，您可以看到它将占用更多空间。</div>
  <div class="item">短一点的文本内容，比上面那个少几个字符。</div>
  <div class="item">一句话的文本内容，只有几个字。</div>
</div>

当然，你也可以亲自尝试一下这些代码，在HTML中添加一个<style>标签，然后在里面加入以下内容：

.container {
  display: flex;
}

.item {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
}

现在你应该可以看到三个项目并排显示，每个项目都有一个边框、外边距和内边距。

项目尺寸的控制

1. 百分比宽度

要控制项目的尺寸，最简单的方法之一就是使用百分比宽度。这允许项目根据其父元素的宽度来确定其自己的宽度。例如，如果我们想让项目占据容器的50%宽度，我们可以使用以下CSS代码：

.item {
  width: 50%;
}

2. 像素宽度

如果你想让项目有一个固定的宽度，可以使用像素宽度。例如，如果我们想让项目宽度为200像素，可以使用以下CSS代码：

.item {
  width: 200px;
}

3. 适应内容宽度

有时候，我们可能希望项目根据其内容的宽度来确定其宽度。这可以通过使用flex-basis属性来实现。例如，如果我们想让项目宽度根据其内容的宽度来确定，可以使用以下CSS代码：

.item {
  flex-basis: auto;
}

默认的尺寸分配

如果我们不指定项目的宽度，浏览器将根据默认规则为项目分配宽度。默认情况下，浏览器将根据项目的flex-grow和flex-shrink属性来分配宽度。

flex-grow 属性指定项目在父元素剩余空间中增长的比例。默认值为1，这意味着项目将根据其flex-basis属性的大小按比例分配剩余空间。
flex-shrink 属性指定项目在父元素空间不足时收缩的比例。默认值为1，这意味着项目将根据其flex-basis属性的大小按比例收缩。