Question

我正在尝试让flexbox中的列根据其内部内容调整其宽度

.container {
  background: #99f;
  display: flex;
  flex-direction: row;
}

.parent {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 160px;
  margin: 5px;
}

.parent-1 {
  background: #fcc;
}

.parent-2 {
  background: #cfc;
}

.parent-3 {
  background: #ccf;
}

.child {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ccc;
  line-height: 3rem;
  text-align: center;
  margin: 3px;
}

<html>
<head>
</head>
<body>
  <div class="container">
    <div class="parent parent-1">
      <div class="child">1</div>
      <div class="child">1</div>
      <div class="child">1</div>
      <div class="child">1</div>
      <div class="child">1</div>
    </div>
    <div class="parent parent-2">
      <div class="child">2</div>
      <div class="child">2</div>
      <div class="child">2</div>
      <div class="child">2</div>
    </div>
    <div class="parent parent-3">
      <div class="child">3</div>
      <div class="child">3</div>
    </div>
  </div>
</body>
</html>

这是我要实现的目标：

我正试图让parent-1，parent-2和parent-3伸展起来。
它们应该根据其内容使用宽度。
除非它们的内容将它们推到那个宽度，否则它们不应覆盖容器的整个宽度。

我尝试了各种版本的CSS，但是它们没有给我想要的结果。

感谢您解决问题！

Flexbox：flex列上的自动宽度

0 个答案: