如何让一个盒子首先收缩，当它达到特定大小时，它会下降到另一行的另一行？答案

【问题标题】：How to make a box to shrink first and when it reaches a specific size, it drops down to another line of a row?如何让一个盒子首先收缩，当它达到特定大小时，它会下降到另一行的另一行？
【发布时间】：2022-02-06 22:42:32
【问题描述】：

我有一个无法解决的问题，我想重现一个行为。

此行为包括，例如：

两个 div（div1 和 div2）在一个带有 flex-wrap 的 flexbox 行中，其中 div2 缩小（当您更改窗口大小时）直到它达到特定宽度，然后才希望它下拉（或包装它）来自 div1。

我唯一能做的就是：

当我从右侧更改窗口大小时，它会立即下降到 div1 以下，然后开始缩小。

<body>
    <div id="container">
        <div class="item" id="pri"></div>
        <div class="item" id="seg"></div> 
    </div>
</body>

/* CSS */

#container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.item {
    width: 300px;
    height: 200px;
}

.item#pri {
    background-color: red;
}

.item#seg {
    background-color: green;
    width: 600px;
    flex-shrink: 3;
    margin-right: 20px;
}

【问题讨论】：

你想让它们保持在同一行还是什么，很抱歉你能解释一下你到底想要什么吗？
是的，我想要在同一行。当我改变窗口大小时，我希望 div2 首先缩小，直到它达到特定大小，它将下降到 div1 以下。可能我不能很好地解释，但感谢您的帮助

标签： html css flexbox shrink

【解决方案1】：

去掉wrap，实际上是separates your divs，并将min-width 添加到id。将flex 或width 设置为您要首先缩小的百分比，将width 设置为第二个。

我在下面的代码中写了一些注释：

    #container {
  display: flex;
  flex-direction: row;
  min-width: 500px;
  max-width: 1200px;
  background-color: violet;
  padding: 10px;
}

.item {
  height: 200px;
}

.item#pri {
  min-width:300px;
  flex: 70%; /* it will grow till 70% of the parent - but just in the moment, when there is space left*/
  background-color: red;
}

.item#seg {
  background-color: green;
  min-width:200px; /*its standart 600px, but it can shrink down to 200px, normal size has priority */
  width: 600px;
}

<div id="container">
      <div class="item" id="pri"></div>
      <div class="item" id="seg"></div> 
  </div>

【讨论】：

【解决方案2】：

在 parent 元素上将 flex-wrap 用作 wrap。
在 children 元素（下例中为300px）上使用第三个成分flex 属性basis，它将充当“最小宽度” — 在它们开始包装之前。

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

.item {
  flex: 1 0 300px; /* 300 or any desired min width */
}



#one {background: red;}
#two {background: blue;}

<div id="container">
  <div class="item" id="one">One</div>
  <div class="item" id="two">Two</div>
</div>

【讨论】：

【解决方案3】：

我刚刚从你的回答中学到了。虽然我没有暴露我真正的问题。我有一个带有单词的标签，在它旁边我有一个输入。

我想要重现的是 label 保持特定大小，然后 input 与 600px 的 width 在窗口浏览器变小时缩小，当它达到特定大小时，它位于label 之下。

<label class="item" for="allwords">all these words: </label>                           
<input class="item" type="text" name="q">

我运行了很多测试，以至于我的 css 文件都搞砸了。我尝试将标签和输入分别放在 div 中，并将这些 div 放在一个 div 中并使用 flexbox（父/子）。

【讨论】：