我有一个容器,里面有很多项目。
我想要在单行中交替显示它们(容器上可能会有水平滚动条),或者将它们包装在多行中。
我考虑使用Flexbox布局模块。这里有两个例子:
.single-line {
border: solid 1px blue;
width: 50%;
overflow-x: scroll;
}
.wrap-line {
border: solid 1px green;
width: 50%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.single-line ul {
flex-wrap: nowrap;
}
.wrap-line ul {
flex-wrap: wrap;
}
li {
display: block;
width: 40px;
height: 40px;
background: gray;
text-align: center;
border: solid 1px red;
line-height: 40px;
}
<div class="single-line">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<br>
<div class="wrap-line">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
最重要的代码如下:
ul {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.single-line ul {
flex-wrap: nowrap;
}
.wrap-line ul {
flex-wrap: wrap;
}
这很接近我想要的,但还存在一些问题:
第一个例子会缩小内部块,导致容器无法滚动。如何解决?
在第二个例子中,如何在行之间添加垂直间隔,但不在容器边缘添加?我考虑过在每个
LI
上使用margin-bottom
,但这不是正确的解决方案(而且我不能为容器设置固定高度)。