html - CSS Flexbox 以 % 宽度包裹项目

Question

我有 2 个元素的 flexbox。第一个元素宽度是 flexbox 的 40%，第二个是 60%。我想在第二个元素的宽度低于 600 像素时包装它，但如果第二个元素被包装我希望两个元素的宽度都为 100%

<div style="display: flex; flex-wrap: wrap; align-items: center;">
  <div id="text1-container" class="text-container" style="flex: 4 0 40%">
    <div id="text1" class="hide-left">
      <p></p>
    </div>
  </div>
  <div style="min-width: 600px; flex: 6 0 60%">
    <img src="" style="width: 100%;">
  </div>
</div>

标签： htmlcssflexboxwidth

Answer 1

试试下面的代码

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child1 {
  background-color: red;
  flex: 1 1 40%;
}

.child2 {
  flex: 1 1 max(60%, 600px);
  background-color: blue;
}

<div class="parent">
  <div class="child1">child1</div>
  <div class="child2">child2</div>
</div>