从3 colums切换到2

我有一个响应式布局设置为3列。每一栏都是我们试图出售的产品。有时候可能有3个项目，2个项目和1个项目。目前，当我删除1个项目时，它将显示在页面的2/3上并将1/3空白。我如何创建它，以便当有2或1个项目被显示为中心，并且它们的最大宽度为640px？从3 colums切换到2

/* -------- 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%; 
}

来源

2015-12-08 sizemattic

Flexbox，就可能更好地为你。 – j08691

随着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

来源

2015-12-08 19:57:28

太好了，谢谢！ – sizemattic

每当它显示2个项目时，每个边之间都有一个空格，就像填充问题一样。没有填充被声明。它可能是flex：1造成这种情况？ – sizemattic

柔性盒将更好地满足您的需要。删除/添加条目，以查看列如何适应新的内容：

.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>

来源

2015-12-08 19:59:40 AVAVT

从3 colums切换到2

回答

相关问题