弹性项目的宽度正在缩小

Question

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

出于某种原因，当我给第一个 DIV 设置 200 像素的宽度时，它不起作用...它没有获得 200 像素的宽度。但是，如果我给它一个 200px 的 min-width，那么它就可以工作并获得 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>

Answer 1

I need to understand why does width not work while min-width works...

因为弹性项目默认设置为 flex-shrink: 1，这意味着 they can shrink 以尽量减少容器溢出。

你的实际代码（浏览器看到的）是这样的：

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

您需要禁用 flex-shrink:

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

现在，因为项目不能缩小到 200px 以下，所以相当于 min-width: 200px。

有关详细信息，请参阅我在此处的回答中的"The flex-shrink factor"：

Answer 2

所以当你使用 flexbox 时，让我们从这个开始，每个子项目将有 3 个不同的元素，它们是：

弹性基础
弹性增长
伸缩收缩

他们每个人都有不同的职责。

弹性基础

Flex-basis 控制元素在被其他 Flexbox 属性操作之前的默认大小。它可以用作宽度或高度属性。让我们看看下面的例子：

.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 的属性时，默认值为 0。这意味着正方形不允许增长以占用容器中的 space。您可以查看下面的示例以获得更多分辨率：

.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-grow相反，决定一个正方形允许缩小多少。 ts 的主要用途是指定哪些项目要收缩，哪些项目不收缩。默认情况下，每个正方形的 flex-shrink 为 1。要了解收缩的工作原理，请参见以下代码段：

.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 属性，因此 flex-shrink 的默认值是 1 所以它看起来像这样：

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

所以这就是为什么单独使用 width 属性不能为您完成工作，这意味着您的第一个 div 将被缩小以防止盒子出现问题, 那么你要做的就是给它一个 min-width: 200px 或 flex-shrink: 0.

注意： 这三个属性有一个 shorthand 称为 flex，您可以将这三个属性与以下顺序：

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

有关这些内容的更多信息，您可以关注 MDN here。

弹性项目的宽度正在缩小

Width of flex item is shrinking

css

width

flexbox