Flex实现九宫格

时间 2019-11-08

标签 flex 实现九宫栏目 Flex 繁體版

原文原文链接

写一个靠谱的flex布局

<!DOCTYPE html>
<html>
<style>
.block {
    padding-top: 30%;
    margin-top: 3%;
    border-radius: 10%;
    background-color: orange;
    width: 30%;
}
.container-flex2  {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
</style>
<body>
   <div class="container-flex2">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</body>
</html>

关键点：利用了padding-top和flex-wrap:wrap，当设置background-color时，是包括盒子模型中的content和padding的，可是为何不设置height呢？由于父元素没有高度，因此定义height:30%是没有用的，且若想每一个block都为正方形，最好的方式就是设置padding-top/padding-bottom：a%，由于此时的百分比是父元素宽度的百分比，而width也为父元素宽度的百分比，因此block能够成为正方形。html