写一个靠谱的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. 传输层TCP和UDP

    TCP协议        传输控制协议        TCP是面向连接.可靠的进程到进程通信的协议        TCP提供全双工工服务,即数据可在同一时间双向传输        三次握手:      ...

  2. [LC] 250. Count Univalue Subtrees

    Given a binary tree, count the number of uni-value subtrees. A Uni-value subtree means all nodes of ...

  3. jquery学习随笔

    转)jquery学习随笔(jquery选择器)   jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言. ...

  4. python之循删list

    先来看下循环遍历删除list元素的一段代码: L=[1,3,1,4,3,6,5] # 0 1 2 3 4 5 6(下标) for i in L: if i%2!=0:#%表示除商取余数,除以2余数为0 ...

  5. 升级mongodb数据库2.6.6到3.0.3，切换引擎，主从同步数据

    只升级mongodb的版本极为简单,更新/替换 bin/目录下的可执行文件即可. debian和osx上的升级,按步骤来,没什么好说的. http://docs.mongodb.org/manual/ ...

  6. printf 输出浮点数

    在测试printf函数输出结果时,写了如下代码: /** * printf:格式化输出函数 * printf函数不会按照格式控制而对数据类型进行转换,不管三七二十一, * 抓到二进制数据就按照格式控制 ...

  7. chap4-关联接口测试-通过全局变量传递cookie

    # 1 http_request.py import requests class HttpRequest: def http_request(self, url, method, data=None ...

  8. haproxy笔记之四:配置文件中的关键字参考

    3.1 balance balance <algorithm> [ <arguments> ]balance url_param <param> [check_po ...

  9. basecalling|vector mark|Assembly的难题|

    生物信息学 染色体可以据染色图谱判断染色体号码,1-22号染色体依次变短,它们影响机体发育,23号染色体决定性别.肿瘤是由于遗传密码变异造成的.因此,遗传密码的解读非常重要,但是因为遗传密码长度非常长 ...

  10. 修改 commit message

    本文为原创文章,转载请标明出处 目录 修改上一条提交的 commit message 修改之前提交的 commit message 1. 修改上一条提交的 commit message git com ...