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

【问题标题】：Place elements side by side if they fit, else make them block elements如果合适，将元素并排放置，否则将它们设为块元素
【发布时间】：2022-01-08 14:30:06
【问题描述】：

我有一堆元素对。每对有两个 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 在不换行的情况下无法并排放置？任何指针都会非常有帮助！

【问题讨论】：

标签： html css flexbox css-grid

【解决方案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>

【讨论】：

这就是我想要的，谢谢！