时间戳

首页 > 解决方案 > 当缩放时包装器缩小到一定宽度时，如何让 flexbox-div 中的元素折叠起来？

html - 当缩放时包装器缩小到一定宽度时，如何让 flexbox-div 中的元素折叠起来？

问题描述

我希望 box2 始终为 200px，而 box1 和 box3 占据其余空间。我也想要，但是在放大网站时，当包装器变为一定大小时，我无法弄清楚如何让 box3 包起来。

我曾尝试min-width: ;在包装器上使用，但没有奏效。

我正在使用的代码是：

#wrapper{
  display: flex;
  flex-flow: wrap row;
}
#wrapper div{
  height: 100px;
  box-sizing: border-box;
  border: solid black;
}
#wrapper #box2{
  width: 200px;
}
#wrapper #box1, #wrapper #box3{
  flex-shrink: 1;
  flex-grow: 1;
}
<body>
    <div id="wrapper">
        <div id="box1">Box 1</div>
        <div id="box2">Box 2</div>
        <div id="box3">Box 3</div>
    </div>
</body>

标签： htmlcss

解决方案

推荐阅读