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％的空间。

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

柔性盒更适合您的需要。删除/添加项目以查看列如何适应新内容：

＆＃13;

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

＆＃13;

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

＆＃13;

从3列切换到2列

2 个答案: