Flex实现九宫格

最新推荐文章于 2024-04-12 21:13:33 发布

weixin_34097242

最新推荐文章于 2024-04-12 21:13:33 发布

阅读量969

点赞数 1

文章标签：前端 ViewUI

原文链接：https://segmentfault.com/a/1190000015951015

版权

写一个靠谱的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可以成为正方形。

weixin_34097242

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex实现九宫格

写一个靠谱的flex布局<!DOCTYPE html><html><style>.block { padding-top: 30%; margin-top: 3%; border-radius: 10%; background-color: orange; ...
复制链接

扫一扫