空格时获取两列，父项太窄时获取一列

Question

我有两组段落，我称之为左和右 - 请参阅问题末尾的 HTML。当它们的 parent 足够宽时，我希望它们并排显示在等宽的列中。当他们的 parent 很窄时，我希望他们一个一个地显示在另一个上面。

父级不是整个浏览器，所以媒体查询不是解决方案。 （这是进入 Vue 组件，屏幕上可能同时显示多个这些组件 - 可能具有不同的宽度和高度。）

我尝试了一个基本的浮动方法：

<style>
.container {width:100%;border: 1px solid;margin:0.5rem;}
.left {color:#006; min-width:20rem; width:50%; float:left;}
.right {color:#060; min-width:20rem; width:50%; float:left;}
</style>

当相邻的列有空间时，这会很好地工作：

当它变窄时，它会切换到左上右上，但它们保持在 20rem 宽度，而不是填充单列的整个宽度。

我见过许多使用 flex 或 grid 的解决方案，但当我尝试调整它们时，它们不起作用。例如。我找到了这个灵活的解决方案：

.container {width:100%;border: 1px solid;margin:0.5rem; display:flex;}
.left {color:#006;flex:max(20rem, 50% - 0.5rem)}
.right {color:#060;flex:max(20rem, 50% - 0.5rem)}

但无论父级的宽度如何，它始终保持为两个 50% 的列。

<div class="container">
  <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
  </div>

  <div class="right">
    <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate...</p>
    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
    <p>Vivamus elementum semper nisi. Aenean leo ligula, porttitor eu, consequat vitae, aenean vulputate eleifend tellus.</p>
  </div>
</div>

Answer 1

需要在parent上添加flex-wrap属性，让children可以换行，然后在children上设置flex为1（会填满左右段落的剩余空间，创建2连列）。然后将最小宽度设置为 20rem（一种要换行的断点）。

.container {
  width:100%;
  border: 1px solid;
  display: flex;
  flex-wrap: wrap;
}
.left {
  color:#006;
  flex: 1;
  min-width: 20rem;
}
.right {
  color:#060;
  flex: 1;
  min-width: 20rem;
}

您还可以使用容器上的 gap 属性在元素之间创建一个空间，并且不要让它们靠得太近。