css 带流量的柔性盒：列换行和高度：最小内容不换行

yyyllmsg 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(134)

我有一个小小的CSS问题。我有不同高度的div，我希望父元素的高度是最大元素的高度，而其余元素也要相应地进行 Package 。下面的代码对行（父元素的宽度是最宽元素的宽度）非常有效，但对列就不行了（只需将body类改为column）。有什么想法吗？

body.row #parent {
  display: flex;
  flex-flow: wrap row;
  width: min-content;
}

body.row .child {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  width: max-content;
}

body.column #parent {
  display: flex;
  flex-flow: wrap column;
  height: min-content;
}

body.column .child {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  height: max-content;
  width: max-content;
}

<html>

<body class="row">
  <div id='parent'>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
      <span>3. Line</span>
      <span>4. Line</span>
      <span>5. Line</span>
      <span>6. Line</span>
      <span>7. Line</span>
      <span>8. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
  </div>
</body>

</html>

css

来源：https://stackoverflow.com/questions/75627826/flexbox-with-flow-column-wrap-and-height-min-content-not-wrapping

2条答案

按热度按时间

2w2cym1i1#

在#parent上使用display: inline-flex;。

body.row #parent {
  display: flex;
  flex-flow: wrap row;
  width: min-content;
}

body.row .child {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  width: max-content;
}

body.column #parent {
  display: inline-flex;
  flex-flow: wrap column;
  height: min-content;
}

body.column .child {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  height: max-content;
  width: max-content;
}

<body class="column">
  <div id='parent'>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
      <span>3. Line</span>
      <span>4. Line</span>
      <span>5. Line</span>
      <span>6. Line</span>
      <span>7. Line</span>
      <span>8. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
  </div>
</body>

赞(0）回复(0）举报 2023-03-05

6rqinv9w2#

height: min-content;将共同应用于所有子级。如果希望子级换行，则必须在#parent上指定max-height: (somValue)px

body.row #parent {
  display: flex;
  flex-flow: wrap row;
  width: min-content;
}

body.row .child {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  width: max-content;
}

body.column #parent {
  display: flex;
  flex-flow: wrap column;
  max-height: 100px;
  width: 200px
}

body.column .child {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  height: max-content;
  width: max-content;
}

<html>

<body class="column">
  <div id='parent'>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
      <span>3. Line</span>
      <span>4. Line</span>
      <span>5. Line</span>
      <span>6. Line</span>
      <span>7. Line</span>
      <span>8. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
  </div>
</body>

</html>

赞(0）回复(0）举报 2023-03-05

我来回答

css 带流量的柔性盒：列换行和高度：最小内容不换行

2条答案

相关问题

热门标签

最新问答