如何创建一个全等四宫格/九宫格（容器宽高未知）

clasnake 发布于2019-08-28 18:22 / 2601人阅读

摘要：代码如下部分如何实现呢我们可以用任意改变长宽元素弹性元素弹性有兴趣的可以试一下，当容器宽高发生变化时，内容块仍然是全等的四宫格。当然，以上有代码一个问题，在以下是不兼容的。

html代码如下

css部分如何实现呢？我们可以用 flex

.container{
        display: flex;
        flex-flow:column nowrap;
        width: 1000px;/*任意改变长宽*/
        height: 600px;
        background:#ccc;

    }
    .parent{
        display: flex;
         flex-flow:row nowrap;
        flex:1 1 0;/*元素弹性*/
        text-align: center;
    }
    .container .parent:first-child{margin-bottom: 10px;}
    .item{
        flex:1 1 0;/*元素弹性*/
        background: green;
    }
    .parent .item:first-child{margin-right: 10px;}

有兴趣的可以试一下，当容器宽高发生变化时，内容块仍然是全等的四宫格。

当然，以上有代码一个问题，flex在ie9以下是不兼容的。

容器云四宫格九宫格九宫格图九宫格源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111207.html

页面架构HTML+CSS ヾ(o◕∀◕)ﾉ常用居中&多列布局

CSS Reset 1.作用（1）清除浏览器默认样式（2）全局样式定义 2.特别注意（1）项目开发初期就定义好（2）reset.css 在引入的时候一定要放在第一位（3）不同的产品reset.css不一样 3.table合并边框间距 table { border-collapse: collapse; // 合并边框 border-spacing: 0; //边框间距。当 `borde...

NervosNetwork 2019-08-29 12:27 评论0 收藏0
页面架构HTML+CSS ヾ(o◕∀◕)ﾉ常用居中&多列布局

CSS Reset 1.作用（1）清除浏览器默认样式（2）全局样式定义 2.特别注意（1）项目开发初期就定义好（2）reset.css 在引入的时候一定要放在第一位（3）不同的产品reset.css不一样 3.table合并边框间距 table { border-collapse: collapse; // 合并边框 border-spacing: 0; //边框间距。当 `borde...

dingding199389 2019-08-01 16:42 评论0 收藏0
使用css伪类before／after实现正方形三宫格、正方形六宫格、正方形九宫格

摘要：结构图解析后记结构图解析： showImg(https://segmentfault.com/img/bVbvXEo?w=862&h=235); showImg(https://segmentfault.com/img/bVbvXEq?w=604&h=814); showImg(https://segmentfault.com/img/bVbvXEv?w=604&h=326); 后记...

CNZPH 2019-08-30 15:44 评论0 收藏0
移动端两端对齐 + 图片宽度自适应

摘要：自适应四宫格有这样一张设计稿，左右两边白色间距为，中间间距为，每一行的两张图是等宽的即平分去掉间距后的宽度有一种方法是和设计师商量，把所有的具体尺寸改为百分比尺寸。。自适应四宫格有这样一张设计稿，左右两边白色间距为4px，中间间距为10px，每一行的两张图是等宽的（即平分去掉间距后的宽度） showImg(http://www.ganother.com/images/four-it...

JerryC 2019-08-29 12:29 评论0 收藏0