html - 如何使 div 的宽度适应 flexbox 的内容

Question

我想调整 .flexrow div 的宽度以适应内容，但我无法使用 flex 设置它。

HTML

<div class="fullwidth">
  <div class="sidebar">
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
  </div>
  <div class="center">
    <div class="flexrow">
      <div class="card">
        <p>card</p>
      </div>
    </div>
  </div>
</div>

CSS

.center {
  display: flex;
  justify-content: center;
}

.flexrow {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flexrow .card {
  width: 300px;
  height: 60px;
  background-color: red;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

我创建了一个片段 here

这是我想要的例子:

有什么建议吗？

Answer 1

这里的主要问题是，当元素换行时，无论是否使用 Flexbox，其容器都不会根据新的内容宽度调整其宽度。

使用现有的标记，这里有一个简单的修复，只需两步即可实现:

1. 将 justify-content: center; 添加到您的 .flexrow 规则

2. 对于每个可能的列，您都需要少一个 ghost 元素来将最后一行的元素一直推到左边。添加的元素与新的 .flexrow .card:empty 规则一起发挥作用。

   .flexrow .card:empty {
     height: 0;
     margin: 0 10px;
     padding: 0 10px;
   }
   

Updated codepen

堆栈片段

.fullwidth {
  background-color: grey;
  display: flex;
}

.sidebar {
  flex: 0 0 280px;
  margin: 10px;
  padding: 10px;
  background-color: black;
  color: white;
}

.flexrow {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.flexrow .card {
  width: 300px;
  height: 60px;
  background-color: red;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

.flexrow .card:empty {
  height: 0;
  margin: 0 10px;
  padding: 0 10px;
}

<div class="fullwidth">
  <div class="sidebar">
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
  </div>
  <div class="center">
    <div class="flexrow">
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>

      <!-- Ghost elements, if max columns is 4 one need 3 -->
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>

    </div>
  </div>
</div>