问如何使用CSS使一个元素收缩到某个点，然后将同级元素收缩到某个点，然后包装eleemnt？
EN

Stack Overflow用户

提问于 2021-07-28 05:29:04

回答 2查看 46关注 0票数 3

我有两个项目在一个弹性盒子里。当有足够的水平空间可用时，我希望右边的元素是最大宽度，左边的元素占据所有剩余的空间。当可用宽度减小时，我想缩小左边的元素，直到它达到一定的宽度。然后，我想缩小右边的元素，直到它达到一定的最小宽度。在这一点上，我想再次缩小左边的元素，直到它达到不同的最小宽度。之后，我希望元素换行，第一个元素占据它的整个行，第二个元素是它的最大宽度。

我将其称为收缩，因为这是我对它的看法，但我不认为我可以在这里使用flex - it，因为flex包装发生在flex收缩之前。通过将每个元素的flex-basis设置为它的最小宽度，将两个元素的flex-grow都设置为1，并在正确的元素上设置一个max-width，我几乎可以做到这一点。但是，这会使这两个元素随着可用空间的增加而以相同的速度增长。我不想让右边的元素增长，直到左边的元素达到一定的宽度。下面的代码片段显示了这一点。

虽然我希望使用CSS解决方案，但在这里我并不一定要依赖于flexbox。如果CSS网格或其他机制可以实现这一点，我当然对此持开放态度。

在下面的代码片段中，在容器div上设置的宽度只是为了模拟它们可能的宽度。在实际代码中，这些宽度将全部设置为auto，实际宽度将由浏览器的视区大小和页面上的其他动态元素确定。

div {
  height: 175px;
}

.container {
  background-color: grey;
  display: flex;
  flex-wrap: wrap;
  width: 700px;
  margin-bottom: 20px;
}

.high-width {
  width: 600px;
}

.med-high-width {
  width: 500px;
}

.med-low-width {
  width: 450px;
}

.low-width {
  width: 400px;
}

.content {
  background-color: lightblue;
  flex: 1 0 350px;
}

.sidebar {
  background-color: lightgreen;
  flex: 1 0 100px;
  max-width: 200px;
}

.wrong {
  background-color: red;
}

<div class="container">
  <div class="content">This fills the remaining space (500px), which is what I want!</div>
  <div class="sidebar">This is 200px wide, which is what I want!</div>
</div>

<div class="container high-width">
  <div class="content">This is 425px wide but I want it it to be 450px (Once the content gets down to 450px wide, I want only the sidebar to start shrinking until it hits its min width)</div>
  <div class="sidebar wrong">This is 175px wide but I want it to be 150px (Once the content gets down to 450px wide, I want only the sidebar to start shrinking until it hits its min width)</div>
</div>

<div class="container med-high-width">
  <div class="content">This fills the remaining space, but that is 375px when I want it to be 400px (Once the sidebar is at its min-width, the content should start shrinking again)</div>
  <div class="sidebar wrong">This is 125px wide but I want it to be 100px (Once the content gets down to 450px wide, I want the sidebar to start shrinking until it hits its min width)</div>
</div>

<div class="container med-low-width">
  <div class="content">This fills the remaining space (350px), which is what I want!</div>
  <div class="sidebar">This is 100px wide, which is what I want!</div>
</div>

<div class="container low-width">
  <div class="content">This is on a row by itself, full width (400p), which is what I want!</div>
  <div class="sidebar">This is on a row by itself and 200px wide, which is what I want!</div>
</div>

flexbox

css

DNS解析特惠

DNS解析提供智能解析、流量调度、安全防护等服务

回答 2

Stack Overflow用户

发布于 2021-07-28 06:00:42

请在任何地方使用min-width属性，而不要使用width。

票数 0

Stack Overflow用户

发布于 2021-07-28 12:37:58

属性min-width可以做到这一点

div {
  height: 175px;
}

.container {
  background-color: grey;
  display: flex;
  flex-wrap: wrap;
  width: 700px;
  margin-bottom: 20px;
}

.high-width {
  min-width: 600px;
}

.med-high-width {
  min-width: 500px;
}

.med-low-width {
  min-width: 450px;
}

.low-width {
  min-width: 400px;
}

.content {
  background-color: lightblue;
  flex: 1 0 350px;
}

.sidebar {
  background-color: lightgreen;
  flex: 1 0 100px;
  max-width: 200px;
}

.wrong {
  background-color: red;
}

<div class="container">
  <div class="content">This fills the remaining space (500px), which is what I want!</div>
  <div class="sidebar">This is 200px wide, which is what I want!</div>
</div>

<div class="container high-width">
  <div class="content">This is 425px wide but I want it it to be 450px (Once the content gets down to 450px wide, I want only the sidebar to start shrinking until it hits its min width)</div>
  <div class="sidebar wrong">This is 175px wide but I want it to be 150px (Once the content gets down to 450px wide, I want only the sidebar to start shrinking until it hits its min width)</div>
</div>

<div class="container med-high-width">
  <div class="content">This fills the remaining space, but that is 375px when I want it to be 400px (Once the sidebar is at its min-width, the content should start shrinking again)</div>
  <div class="sidebar wrong">This is 125px wide but I want it to be 100px (Once the content gets down to 450px wide, I want the sidebar to start shrinking until it hits its min width)</div>
</div>

<div class="container med-low-width">
  <div class="content">This fills the remaining space (350px), which is what I want!</div>
  <div class="sidebar">This is 100px wide, which is what I want!</div>
</div>

<div class="container low-width">
  <div class="content">This is on a row by itself, full width (400p), which is what I want!</div>
  <div class="sidebar">This is on a row by itself and 200px wide, which is what I want!</div>
</div>