如何拥有流畅的弹性布局

Question

我正在尝试制作一个流畅的弹性字段，如果没有足够的 space，那么它应该下降到下一行。正如您在此 example 中看到的，如果您减小字段的大小，它不会下降到下一行，因为我使用的是 flex。

.container {
  width: 80%;
  border: 2px solid #ddd;
  padding: 20px;
  display: flex;
  overflow: hidden;
}
.container .panel {
  flex: none;
}
.container .panel-info {
  display: flex;
  align-items: center;
}
.container .panel-info .dot {
  background-color: #ccc;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin: 0 8px;
}

<div class="container">
  <div class="panel">Some Long Info</div>
  <div class="panel-info">
    <div class="dot"></div>
    <div class="info">Information</div>
  </div>
</div>

Answer 1

使用flex-wrap: wrap.

More information on MDN 关于 flex-wrap 属性

如何拥有流畅的弹性布局

How to have a fluid flex layout

css

styles

css-selectors

flexbox