flex下，通过占位元素解决多行space-around的布局问
2017-10-14 本文已影响0人
novaDev
<body>
<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</body>
<style>
.container {
outline: 1px solid green;width: 500px;height: 500px;
display: flex;
flex-wrap:wrap;
justify-content:space-around;
}
.cell {
width: 120px;height: 120px;outline: 1px solid red;
}
</style>
可以看到：第二行多出来的cell会被放到该行的最中央，使该行符合justify-content: space-around，但是可能和我们预想的结果不太相同（预想结果应该是该cell靠左对齐），那么我们应该如何解决这个问题呢？
解决方案有两个：
- 通过js或者css中的calc()动态的计算cell的margin等属性，算就行了，这里不展开讨论；
- 通过插入占位元素解决问题：
下面我们尝试在container下加入若干宽度与cell相同的占位元素（类名为“em”；为方便演示，这里将占位元素背景色设置为红色，height设置为1px）
修改后的代码和结果如下：
<body>
<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="em"></div>
<div class="em"></div>
<div class="em"></div>
<div class="em"></div>
<div class="em"></div>
<div class="em"></div>
<div class="em"></div>
<div class="em"></div>
<div class="em"></div>
</div>
</body>
<style>
.container {
outline: 1px solid green;width: 500px;height: 500px;
display: flex;
flex-wrap:wrap;
justify-content:space-around;
}
.cell {
width: 120px;height: 120px;outline: 1px solid red;
}
.em {
width: 120px;height: 1px;background-color: red;
}
</style>
可以看到：第二行的cell已经被放到了改行的最左侧，实现了我们的需求
空元素的background-color、height都是没有必要的，所以最后我们要将这两个属性去掉：
<body>
<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="em"></div>
<div class="em"></div>
<div class="em"></div>
<div class="em"></div>
<div class="em"></div>
<div class="em"></div>
<div class="em"></div>
<div class="em"></div>
<div class="em"></div>
</div>
</body>
<style>
.container {
outline: 1px solid green;width: 500px;height: 500px;
display: flex;
flex-wrap:wrap;
justify-content:space-around;
}
.cell {
width: 120px;height: 120px;outline: 1px solid red;
}
.em {
width: 120px;
}
</style>
done！
另外还有一些说明
- 仅适用于space-around
- 仅适用于等宽cell
- 例子中的cross轴没有处理，所以不美观
- 为什么要插那么多空元素？
空元素数量可以通过js来计算的，这里偷懒没有算，直接多多益善啦：）
