从 3 列切换到 2 列

Question

我为 3 列设置了响应式布局。在每一列中是我们试图销售的产品。有时可能有 3 项、2 项和 1 项。目前，当我删除 1 个项目时，它将显示在页面的 2/3 上，并将 1/3 留空。我如何创建它以便在显示 2 或 1 个项目时将它们居中并且它们的最大宽度为 640px？

/* -------- HTML ------------*/ 

<div class="item">Item1</div>
<div class="item">Item1</div>
<div class="item">Item1</div>

/* -------- CSS ------------*/ 

.item {
display: inline;
float: left;
width: 33.33%;
}

Answer 1

使用 flexbox，容器将根据您拥有的 item 数量填充 100% 的 space。

HTML

<div class="flex-row">
  <div class="item">Item1</div>
  <div class="item">Item2</div>
  <div class="item">Item3</div>
</div>

<div class="flex-row">
  <div class="item">Item1</div>
  <div class="item">Item2</div>
</div>

<div class="flex-row">
  <div class="item">Item1</div>
</div>

CSS

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.item {
  flex: 1;
}

Here is an example

Answer 2

弹性盒子更适合您的需要。 Remove/add 项以查看列如何适应您的新内容：

.container{
  display: flex;
}
.item{
  flex-grow: 1;
  background-color: red;
  border: 1px solid black;
}

<div class="container">
  <div class="item">Item1</div>
  <div class="item">Item2</div>
  <div class="item">Item3</div>
</div>

从 3 列切换到 2 列

Switching from 3 columns to 2

css

width