Flex Box Divs 挤在一起 - CSS

在 CSS 中使用 Flex 布局可以很方便地管理多个容器之间的布局关系。然而，当放置的 div 带着不同的尺寸并紧密排列时，会导致它们挤在一起，产生一些不必要的问题。

在本篇文章中，我们将探索在 Flex 容器中拥挤情况下如何使 div 保持自适应并防止它们重叠。

Flex 布局简介

Flex 布局是一个 CSS3 新增的盒子模型，在 Web 开发中广泛使用。使用 Flex 布局的一个主要优势是可以在不使用浮动或定位的情况下实现动态布局。

为了使用 Flex 布局，我们需要将元素的父容器（即 div）的 display 属性设置为 flex。然后，我们可以使用一些额外的 CSS 属性，如 flex-direction 和 justify-content 来管理元素的布局关系。

下面是一个简单的示例，展示了如何在两个 div 元素之间使用 Flex 布局：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.box {
  width: 100px;
  height: 100px;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

Flex Box Divs 挤在一起的问题

当 div 元素拥有相同的尺寸时，使用 Flex 布局不会出问题。然而，当它们具有不同的尺寸并排列紧密时，我们可能会遇到以下问题：

• 容器中的元素会重叠；
• Div 元素可能被压缩或拉伸；

以下是一个示例，四个 div 元素拥有不同的宽度，并排在一行上。由于 div 之间非常接近，并且展示文本很长，导致它们重叠在一起。这显然不是我们想要的效果。

.container {
  display: flex;
}

.box1 {
  width: 200px;
}

.box2 {
  width: 100px;
}

.box3 {
  width: 150px;
}

.box4 {
  width: 50px;
}

<div class="container">
  <div class="box1">Lorem ipsum dolor sit amet</div>
  <div class="box2">consectetur adipiscing elit</div>
  <div class="box3">sed do eiusmod tempor</div>
  <div class="box4">incididunt</div>
</div>

解决方法

1. 使用 flex-wrap 属性

Flex 布局中的 flex-wrap 属性可以控制外部容器中子元素是否换行。默认情况下，flex-wrap 属性设置为 nowrap，意味着元素不会折行并坚持在一行上。但是，如果我们将其更改为 wrap，那么当元素太宽进入一行时它们将被放置到下一行上。

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 100px;
  height: 100px;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

2. 使用 flex-shrink 属性

当元素过宽，它们可能会压缩并在同一行上紧密排列。一种简单的解决方法是使用 flex-shrink 属性。该属性表示元素可缩小的因子。

.container {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

默认情况下，flex-shrink 属性设置为 1，这意味着当元素太宽时，它们将按比例压缩。但是，当我们将其设置为 0 时，它们将保持它们的初始宽度，不会被压缩或缩小。因此，我们可以使用 flex-shrink: 0 来保持元素不重叠。

3. 使用 flex-grow 属性

另一个有用的属性是 flex-grow，这可以使元素增长以适应可用的空间。默认情况下，flex-grow 属性设置为 0，不允许元素增长。但是，如果我们将它设置为 1，则元素将增长以填充为其分配的可用空间。

.container {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  flex-grow: 1;
}

在这个例子中，当我们让所有的 div 元素的 flex-grow 属性为 1 时，它们将在容器中并排紧密排列，但元素将等分容器的宽度，而不会被挤在一起。

结论

在使用 Flex 布局时，我们可能会遇到 div 元素挤在一起的情况。要解决这个问题，我们可以使用 flex-wrap、flex-shrink 和 flex-grow 属性来控制元素在容器中的空间，并保持它们的自适应。