flex下，通过占位元素解决多行space-around的布局问

作者: novaDev | 来源:发表于2017-10-14 16:39 被阅读0次

flex下，通过占位元素解决多行space-around的布局问
space-around 和 space-evenly 的区别
Flex
flex布局
如何垂直居中一个元素
6Flex 布局
css flex
flex布局
flex布局
写给 Android 开发者的 CSS Flexbox 布局学习

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