时间戳

首页 > 解决方案 > 如何拥有流畅的弹性布局

css - 如何拥有流畅的弹性布局

问题描述

我正在尝试制作一个流体弹性场，如果没有足够的空间，那么它应该下降到下一行。正如您在此示例中看到的那样，如果您减小字段的大小，它不会下降到下一行，因为我使用的是 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>

标签： cssflexboxcss-selectorsstyles

解决方案

使用flex-wrap: wrap.

MDN 上有关该flex-wrap物业的更多信息

推荐阅读