如何让一个盒子首先收缩，当它达到特定大小时，它会下降到另一行的另一行？
[英]How to make a box to shrink first and when it reaches a specific size, it drops down to another line of a row?
问题描述
I have a problem I can't solve which I want to reproduce a behaviour.
我有一个无法解决的问题，我想重现一个行为。
This behaviour consists in, per example:例如，此行为包括：
Two divs(div1 and div2) in a flexbox row with flex-wrap, where the div2 shrinks(while you're changing window size) until it reaches a specific width, and only after that, I want it to drop down(or wrap it) from div1. flexbox 行中带有 flex-wrap 的两个 div（div1 和 div2），其中 div2 缩小（当您更改 window 大小时）直到它达到特定宽度，只有在那之后，我希望它下降（或换行它）来自 div1。
The only thing I can do to happen is:我唯一能做的就是：
- when I change window size from the right, it instantly drops below div1 and after that it starts to shrink.当我从右侧更改 window 大小时，它立即下降到 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;
}
3 个解决方案
解决方案1
0 2022-01-27 13:57:48
check this out, maybe you will find the answer https://www.w3schools.com/css/css_rwd_mediaqueries.asp看看这个，也许你会找到答案https://www.w3schools.com/css/css_rwd_mediaqueries.asp
解决方案2
0 2022-01-28 17:51:37
Get rid of the wrap , which actually separates your divs and add min-width to the ids.摆脱wrap ，它实际上将您的 div 分开并将min-width添加到 id。 Set the flex or width in percent to the one you want to shrink first and width in pixels to the second one.将flex或width （以百分比为单位）设置为您要首先缩小的那个，将width （以像素为单位）设置为第二个。
I wrote some notes into code below:我在下面的代码中写了一些注释：
#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>
解决方案3
0 2022-01-28 19:03:05
- Use flex-wrap as
wrapon the parent Element.使用 flex- wrap作为父元素的包装。 - Use the third constituent
flexpropertybasison the children Elements (300pxin the below example) which will act as a "min width" — before they start to wrap.在子元素（下例中为300px）basis使用第三个组成flex属性，这将充当“最小宽度” ——在它们开始换行之前。
#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>
解决方案4
0 2022-02-06 14:42:32
I just learned with your answers.我刚从你的回答中学到了。 Though I didn't expose my real problem.虽然我没有暴露我真正的问题。 I have a label with words on it, and next to it I have an input.我有一个 label 上面有文字，在它旁边我有一个输入。
What I want to reproduce is the label staying in a specific size, and then the input with a width of 600px shrinking while window browser is getting small, and when it reaches a specific size, it drops under the label .我要重现的是label保持在特定大小，然后在 window 浏览器变小时width为600px的input缩小，当它达到特定大小时，它会下降到label
<label class="item" for="allwords">all these words: </label>
<input class="item" type="text" name="q">
I've running so many tests that my css file is all messed up.我运行了很多测试，以至于我的 css 文件都搞砸了。 I've tried to put label and input inside of divs individually, and those divs inside of one div and playing with flexbox(parent / child).我尝试将 label 和单独输入到 div 中，并将这些 div 放在一个 div 中并使用 flexbox（父/子）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.