Question

如果任何项目不合适，是否可以包装所有项目？

在以下示例中，当我将视图端口设置为800px时，最后一项将换行。我想要第二个项目也包装好。我不确定我是否正在使用正确的术语来解释我想要描述的内容。

我考虑使用宽度媒体查询，但这不会有帮助，因为我不知道文字的宽度。

<div class='flex-container'>
  <div class='flex-item'>Hi there.</div>
  <div class='flex-item'>Mr Bond.</div>
  <div class='flex-item'>How are you?</div>
</div>  

.flex-item {
  border: 1px solid black;
  font-size: 60px;
  display: inline-block;
}

限制： *我正在寻找纯CSS解决方案，没有JS

Codepen： https://codepen.io/anon/pen/MVqRKa

Answer 1

如果我理解正确，有一些可能性：

您可以在第一个和第二个div框之后插入<br />标记

<div class='flex-container'> <div class='flex-item'>Hi there.</div> <br /> <div class='flex-item'>Mr Bond.</div> <br /> <div class='flex-item'>How are you?</div> </div>

您可以定义宽度https://codepen.io/Climb/pen/LdJvvJ

当任何项目不适合使用CSS和没有宽度媒体查询时包裹所有项目？

1 个答案: