css九宫格布局

最新推荐文章于 2024-08-22 10:53:27 发布

前端码农..

最新推荐文章于 2024-08-22 10:53:27 发布

阅读量364

点赞数

文章标签： css html5 html

原文链接：https://blog.csdn.net/weixin_47353884/article/details/118356927?ops_request_misc=&request_id=&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~es_rank~default-21-118356927.pc_search_all_es&utm_term=css%E5%B8%83%E5%B1%80&spm=1018.2226.30

版权

用弹性盒实现九宫格布局

<!-- css flex布局实现响应式九宫格以及calc()计算表达式的值 -->
<!DOCTYPE html>
<html>
<style>
.blockDiv{
    width: 100%;
    display:flex;
    flex-wrap: wrap;
}
.block{
    width: calc(calc(100% / 3) - 10px);
    margin:5px;
    height:50px;
    box-sizing: border-box;
    border:1px  solid #000;
}
</style>
<body>
   <div class="blockDiv">
        <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>

flex-wrap:默认情况下，项目在一行排列。这个属性决定当项目在一行排不下时，如何换行。值为:wrap | no-wrap || wrap-reverse
css3的calc()
calc()可以计算不同单位的值，也可以嵌套，不过符号之间一定要有空格，虽然"*"、"/"之间可以没有，建议还是加上空格。例如：width:calc(100% - 30px)；

*如果你用得到的话可以直接拿走，在我的QQ技术交流群里，可以自助拿走，群号是581286372*