写一个靠谱的flex布局

  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. .block {
  5.     padding-top: 30%;
  6.     margin-top: 3%;
  7.     border-radius: 10%;
  8.     background-color: orange;
  9.     width: 30%;
  10. }
  11. .container-flex2  {
  12.     display: flex;
  13.     flex-wrap: wrap;
  14.     justify-content: space-around;
  15. }
  16. </style>
  17. <body>
  18.    <div class="container-flex2">
  19.         <div class="block"></div>
  20.         <div class="block"></div>
  21.         <div class="block"></div>
  22.         <div class="block"></div>
  23.         <div class="block"></div>
  24.         <div class="block"></div>
  25.         <div class="block"></div>
  26.         <div class="block"></div>
  27.         <div class="block"></div>
  28.     </div>
  29. </body>
  30. </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. imageMso7345.rar

    本工具用于Office开发中的customUI设计,查询内置图标的工具. 解压后,有2个Excel文件. 第一个文件的动态图: 第2个文件也可以查询图标: 下载地址: imageMso7345.rar

  2. 实战_3：新建产品配置（product）并导出项目

    产品配置Product 产品配置用于定义和管理RCP应用的多个方面特征.并支持将RCP项目导出为部署包(类似eclipse压缩包),可以直接部署到其他环境上使用. 产品配置必须新建一个 扩展名为 .p ...

  3. Part-Appium-1

    1.安装node > 下载二进制文件,解压后,配置到环境变量 https://nodejs.org/download/release/latest/ > vim ~/.bashrc,exp ...

  4. [LC] 520. Detect Capital

    Given a word, you need to judge whether the usage of capitals in it is right or not. We define the u ...

  5. CMOS

    CMOS是Complementary Metal Oxide Semiconductor(互补金属氧化物半导体)的缩写.它是指制造大规模集成电路芯片用的一种技术或用这种技术制造出来的芯片,是电脑主板上 ...

  6. linux awk详解

    awk: awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑, awk在其对数据分析并生成报告时,显得尤为强大. 简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开 ...

  7. 学习python-20191108（1）Mysql、Flask

    一.使用pymysql模块操作MYSQL 导入pymysql模块: pip install pymysql 1.增删改 import pymysql # 定义数据库连接信息 config = {    ...

  8. python中编码判断

    https://www.cnblogs.com/lc-D-a/p/6074878.html python3 用isinstance()检查unicode编码报错

  9. js mvvm:闲来无事，实现一个只具最基本数据双向绑定的mvvm

    近期项目内用knockoutjs. 想模拟实现数据双向绑定的基本功能. 只具有最基本的功能,且很多细节未曾考虑,也未优化精简. 能想到的缺少的模块 1事件监听,自定义访问器事件 2模版 3父子级 编码 ...

  10. Zabbix-3.0.3实现微信（WeChat）报警

    转自:http://blog.sina.com.cn/s/blog_87113ac20102w7hp.html Zabbix可以通过多种方式把告警信息发送到指定人,常用的有邮件,短信报警方式,但是越来 ...