Flex项目的宽度正在缩小

Question

我有一个带有"display: flex;"的DIV，其中包含2个相邻的子DIV。第一个仅是包含一些有序列表项的DIV，而第二个DIV包含一些图像。对第二个DIV应用了"display: flex"和"flex-wrap: wrap"。

由于某种原因，当我为第一个DIV设置200px的宽度时，它不起作用...它没有得到200px的宽度。但如果我改成使用"min-width"为200px，那么它就能得到200px的宽度。我需要知道为什么"width"不起作用，而"min-width"起作用...请看下图：

/* Parent container that contains 2 child DIVs */

.parent_flex_container {
  display: flex;
}


/* First child DIV */

#desktop_sidemenu {
  width: 200px;
}


/* Second child DIV */

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


/* Images of the second child DIV */

.Cac {
  max-width: 50%;
  height: 50%;
  margin-bottom: 20px;
  padding: 0 5px;
}

<div class="parent_flex_container">
  <div id="desktop_sidemenu">
    <nav>
      <ul>
        <li><a href="#">Arabic</a></li>
        <li><a href="#">Green tea</a></li>
      </ul>
    </nav>
  </div>

  <div>
    <div id="Featured_grid">
      <div class="grid_title_holder">
        <h2>Featured</h2>
      </div>

      <div class="flex_container">
        <div class="Cac">
          <img src="images/cover1.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>
        <div class="Cac">
          <img src="images/cover2.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>
        <div class="Cac">
          <img src="images/cover1.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>
        <div class="Cac">
          <img src="images/cover2.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>
        <div class="Cac">
          <img src="images/cover1.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>
        <div class="Cac">
          <img src="images/cover2.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>
        <div class="Cac">
          <img src="images/cover1.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>
        <div class="Cac">
          <img src="images/cover2.jpg" alt="" title="" />
          <p class="Artist_name_holder">Artist Name</p>
          <p class="Song_title_holder">Song Title</p>
        </div>

      </div>
    </div>

  </div>

</div>

- Oxin

Answer 1

因为默认情况下，flex项目被设置为flex-shrink:1，这意味着它们可以缩小以最小化容器的溢出。您实际的代码（浏览器看到的）是这样的：

#desktop_sidemenu {
   width: 200px;   /* author defined */
   flex-shrink: 1; /* default setting */
}

您需要禁用 flex-shrink：

#desktop_sidemenu {
   width: 200px;
   flex-shrink: 0;
}

现在，由于该项目无法缩小到小于200px，因此它相当于min-width: 200px。

有关更多详细信息，请参见我的答案中的“flex-shrink因子”：

• flex-basis和width之间的区别是什么？

- Michael Benjamin

---

谢谢，现在明白了。我将使用“flex: 0 0 200px;”。 - Oxin

Answer 2

让我们从Flexbox的3个不同元素开始解释。使用Flexbox时，每个子项都有以下三种不同的元素：

- flex-basis - flex-grow - flex-shrink

它们各自具有不同的功能。

flex-basis属性控制元素在被其他Flexbox属性操作之前的默认大小。它可以用作宽度或高度属性。请看下面的示例： flex-basis ```css .item { flex-basis: 100px; } ```

上述代码将设置该元素的默认大小为100像素。

.flexbox {
  display: flex;
}
.red {
  background: red;
  flex-basis: 100px;
}
.green {
  background: green;
  flex-basis: 100px;
}
.blue {
  background: blue;
  flex-basis: 100px;
}

<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

flex-grow

现在，当涉及到属性叫做 flex-grow 时，默认值为0。这意味着正方形不能增长以占据容器中的空间。您可以查看下面的示例以获得更多解释：

.flexbox {
  display: flex;
}
.red {
  background: red;
  flex-grow: 0;
}
.green {
  background: green;
  flex-grow: 0;
}
.blue {
  background: blue;
  flex-grow: 0;
}

<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

那么这里有什么区别呢？嗯，让我们尝试为每个方块增加flex-grow到1：

.flexbox {
  display: flex;
}
.red {
  background: red;
  flex-grow: 1;
}
.green {
  background: green;
  flex-grow: 1;
}
.blue {
  background: blue;
  flex-grow: 1;
}

<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

flex-shrink

Flex-shrink是flex-grow的反义词，它确定正方形被允许缩小的程度。其主要用途是指定您希望哪些项目收缩，以及哪些项目不收缩。默认情况下，每个正方形的flex-shrink为1。要了解shrink如何工作，请参见下面的代码片段：

.flexbox {
  display: flex;
}
.red {
  background: red;
  flex-grow: 0;
  flex-basis: 100px;
  flex-shrink: 1;
}
.green {
  background: green;
  flex-grow: 0;
  flex-basis: 100px;
  flex-shrink: 0;
}
.blue {
  background: blue;
}

<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

注意：您需要调整浏览器大小以查看上面方块的差异。

---

实际答案

所以你的问题在于flex-shrink属性，因为默认值是1，所以它会像这样显示：

#desktop_sidemenu {
  width: 200px;
  flex-shrink: 1; /* default setting of browser */
}

因此，仅使用width属性无法满足您的需求，这意味着您的第一个

将被收缩，以防止框顺序出错。要使其正常工作，您只需为其提供min-width: 200px或flex-shrink: 0。

注意：这三个属性有一个简写称为flex，您可以按照以下顺序将这三个属性作为一个属性进行设置：

flex: 0 0 200px; /* flex-grow flex-shrink flex-basis */

如果您想了解有关这些内容的更多信息，可以在此处关注MDN 链接。

- SMAKSS

---

谢谢你的回答，我非常感激！ - Oxin