flexbox中列的适合内容宽度[重复]

Posted 2023-03-05

【中文标题】flexbox中列的适合内容宽度[重复]

【英文标题】：Fit-content width for columns in a flexbox [duplicate]

【发布时间】：2020-11-19 18:46:45

【问题描述】：

我这里有这段代码：

#wrapper 
  height: 250px;
  position: relative;


#container 
  padding: 1%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-wrap: wrap;
  background-color: gray;
  height: 100%;


.item 
  background: skyblue;
  margin: 0 0 1em 1em;
  padding: 1%;
  height: fit-content;

<div id="wrapper">
  <div id="container">
    <div class="item">Really really really really really really long</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
  </div>
</div>

如您所见，第二列和第三列前面有一些空白。

有什么办法可以解决吗？

---

编辑：这是生成的结果（Chrome 84）：

我希望看到的：

【问题讨论】：

get rid of that 是什么意思？让它更清楚。

@jinongun 对不起，我指的是列前的空白。

你最好展示你想要的蓝图。

不完全清楚你在说什么可用空间。你能显示问题区域的屏幕截图吗？

【参考方案1】：

将align-content: flex-end; 添加到#container 是否符合您的要求？

#wrapper 
  height: 250px;
  position: relative;


#container 
  padding: 1%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-content: flex-end;
  flex-wrap: wrap;
  background-color: gray;
  height: 100%;


.item 
  background: skyblue;
  margin: 0 0 1em 1em;
  padding: 1%;
  height: fit-content;

<div id="wrapper">
  <div id="container">
    <div class="item">Really really really really really really long</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
    <div class="item">Short</div>
  </div>
</div>