css - 如果块元素不适合使用css的一行，如何将块元素放在宽度为100％的另一行中？

Question

我有以下要求：当几个块元素不适合一行时，将它们放入另一行并使其为 100% 宽度，如果它们适合一行而不是自动宽度。所以，问题是下一个问题：是否可以仅使用 css 来实现？非常感谢！

.container {
  width: 300px;
  border: 1px solid grey;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: gray;
  box-sizing: border-box;
}

.container2 .box {
  width: 100%;
}

if they fit in one row than take auto width
<div class="container">
  <div class="box"></div>
  <div class="box"></div>  
</div>

<br/>
If they don’t fit in one row put<br/>
them into another and make them to be 100% width
<div class="container container2">
  <div class="box"></div>
  <div class="box"></div>  
</div>

标签： css

Answer 1

这是你想要达到的目标吗？

用于flex-wrap在第一行溢出时自动创建新行。

.container {
  display: flex;
  flex-wrap: wrap;
  width: 250px;
  border: 1px solid grey;
  padding: 10px 0 0 10px;
  text-align: center;
  box-sizing: border-box;
}

.box {
  flex: 1 0 100px;
  height: 50px;
  background-color: gray;
  box-sizing: border-box;
  margin: 0 10px 10px 0;
}

<div class="container">
  <div class="box"></div>
</div>

<br/>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

<br/>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

---

对于动态内容

$(".container").each(function() {
  if ($(this).height() > 100) {
    $(".box", this).each(function() {
      $(this).addClass("stretch");
    });
  }
});

.container {
  display: flex;
  flex-wrap: wrap;
  width: 250px;
  border: 1px solid grey;
  padding: 10px 0 0 10px;
  text-align: center;
  box-sizing: border-box;
}

.box {
  height: 50px;
  background-color: gray;
  box-sizing: border-box;
  margin: 0 10px 10px 0;
  padding: 0 10px;
}

.stretch {
  flex: 1 0 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="box">text</div>
</div>

<br/>

<div class="container">
  <div class="box">text</div>
  <div class="box">more text than text</div>
</div>

<br/>

<div class="container">
  <div class="box">text</div>
  <div class="box">more text than text</div>
  <div class="box">Lots more text than more text than text</div>
</div>