如果适合，则将元素并排放置，否则将它们设为块元素

Question

我有一堆元素对。每对有两个 div。如果它们可以放在同一条线上，我希望每一对并排坐着，否则我希望它们一个坐在另一个上面。情况是这样的：

.pair {
  display: flex;
  flex-direction: row;
}

div {
  margin: 0 5px;
}

<div class="pair">
  <div>Yeet a deet</div>
  <div>Make me display:block when the container can't fit the divs side-by-side</div>
</div>

在不设置断点或不使用 JS 的情况下，有没有办法让这些 div display: block 无法在不换行的情况下并排放置？任何指示都会非常有帮助！

Answer 1

难道flex-wrap不解决吗？

.pair {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.pair > * {
  box-shadow: 0 0 0 1px blue;
  flex: 1 1 auto;
}

div {
  margin: 0 5px;
}

<div class="pair">
  <div>Yeet a deet</div>
  <div>Make me display:block when the container can't fit the divs side-by-side</div>
</div>

如果适合，则将元素并排放置，否则将它们设为块元素

Place elements side by side if they fit, else make them block elements

html

css

flexbox

css-grid