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

Flex实现九宫格的更多相关文章

  1. React Native之ListView实现九宫格效果

    概述 在安卓原生开发中,ListView是很常用的一个列表控件,那么React Native(RN)如何实现该功能呢?我们来看一下ListView的源码 ListView是基于ScrollView扩展 ...

  2. Vue(小案例_vue+axios仿手机app)_首页（底部导航栏+轮播图+九宫格）

    ---恢复内容开始--- 一.前言                        1.底部导航(两种做法)                                         2.轮播图 ...

  3. CSS实现自适应九宫格布局 大全

    看到微博和朋友圈都实现了图片九宫格,曾经有次面试也问到了九宫格这个问题,当时想到的是先固定每个单元格的宽高,然后进行浮动.今天想折腾一下,实现自适应父元素宽度的布局.这次我只写了四种方式去实现九宫格, ...

  4. flex和layout移动端布局

    1.九宫格 样式为: ul{ display: flex; flex-wrap: wrap;//超出换行 } li{ width: 33%; height: 60px; display: flex; ...

  5. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  6. ReactNative: 使用View组件创建九宫格

    一.简言 初学RN,一切皆新.View组件跟我们iOS中UIView类似,作为一个容器视图使用,它主要负责承载其他的子组件.View组件采用的是FlexBox伸缩盒子布局,通过对它的布局可以影响子组件 ...

  7. 纯js制作九宫格

    Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动,一定需要脱离标准文档流,所以我们给它使用绝对定位. 2.利 ...

  8. flex布局大全 2019

    有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...

  9. flex布局大全

    有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...

随机推荐

  1. logstash nested内嵌字段 field protobuf解码 codec 的解决办法

    logstash nested内嵌字段 field protobuf解码 codec 的解决办法 主要需求 logstash-codec 下https://www.elastic.co/guide/e ...

  2. 第二类错误|检验统计量|左偏|右偏|P值

    6 第二类错误在H0中的假设值差别越大时增大? 不对,第二类错误在H0中的假设值差别越大时变小. 检验统计量有哪些? 根据假设内容确定是左偏还是右偏? P值是在原假设为真的条件下,检验统计量大于或等于 ...

  3. mac下停止和启动mysql命令

    启动MySQL服务 sudo /usr/local/MYSQL/support-files/mysql.server start   停止MySQL服务 sudo /usr/local/mysql/s ...

  4. Redis学习之热点key重建

    在Redis的生产环境中,大量客户端连接请求某一个key,但都需要从DB中获取数据,来回写数据库,如下图: <ignore_js_op> 造成的问题: 大量的线程请求数据库,造成数据库压力 ...

  5. 实现一个简易的HashMap

    实现一个键的类型为int,值的类型为int的HashMap 输入一个T,表示操作次数: 之后每行接一个操作,可以包括插入.删除.修改.查询.清空.判断是否有这个键: 因为是刚学完随手敲的,所以功能粗糙 ...

  6. 如何创建Hexo站点的Tags和Categories默认页面

    安装Hexo的categories生成插件 1 $ npm install hexo-generator-category --save 安装Hexo的Tags生成插件 1 $ npm install ...

  7. 为什么有这么多人呼吁要取代Facebook？

    扎克伯格这段时间算是栽了,身为人生大赢家的他或许正在遭受最为灰暗的时刻.因为泄露5000万用户数据这一事件,Facebook股价暴跌且扎克伯格身家缩水.被英国与美国相关部门调查.#删除Facebook ...

  8. mysql中事务的并发问题与隔离级别

    回归一下事务的四大特性ACID 1.原子性(Atomicity) 事务开始后所有操作,要么全部做完,要么全部不做.事务是一个不可分割的整体.事务在执行过程中出错,会回滚到事务开始之前的状态,以此来保证 ...

  9. Linux系统添加新用户

    Linux系统中一般不直接使用root用户进行操作,需要添加新的用户. 首先,查看当前系统已有的用户 cat /etc/passwd 查看用户组 cat /etc/group 其次,添加想要的用户组和 ...

  10. shell清除文件内容脚本

    先来代码: [root@localhost Qingchu]# cat Qingchu.sh #!/bin/bash #描述: #作者:孤舟点点 #版本:1.0 #创建时间:-- :: PATH=/b ...