写一个靠谱的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. vue基本配置和生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  2. yaml文件的格式

    后缀为.yml    格式一般就是key:空格 value    这里的value可以是 普通数据(数字,字符串)   ---------------------------------------- ...

  3. spring和mybatis整合报错:org.springframework.beans.MethodInvocationException: Property 'dataSource' threw exception; nested exception is java.lang.NoClassDefFoundError

    Exception in thread "main" org.springframework.beans.factory.UnsatisfiedDependencyExceptio ...

  4. [LC] 56. Merge Intervals

    Given a collection of intervals, merge all overlapping intervals. Example 1: Input: [[1,3],[2,6],[8, ...

  5. Hibernate实现步骤

    1. 引入jar文件(hibernate3.jar, lib\required目录下所有的jar,log4j记录的log4j-1.2.16.jar,slf4j-log4j12-1.5.8.jar,oj ...

  6. 赫夫曼解码(day17)

    思路: 传入map(字节与对应字节出现的次数)和最后生成的要传送的字节.将他们先转换成对应的二进制字节,再转换成原来的字符串. 代码: 12345678910111213141516171819202 ...

  7. 吴裕雄--天生自然python学习笔记：Python3 标准库概览

    操作系统接口 os模块提供了不少与操作系统相关联的函数. >>> import os >>> os.getcwd() # 返回当前的工作目录 'C:\\Python ...

  8. 在Docker内安装jenkins运行和基础配置

    这里是在linux环境下安装docker之后,在doucer内安装jenkins --------------------docker 安装 jenkins---------------------- ...

  9. python字符串复制的几种方法

    >>> list1 = [1,2] >>> id(list1) 50081032 >>> list2 = list1.copy() >> ...

  10. PAT B1080 MOOC期终成绩(C++)

    PAT甲级目录 | PAT乙级目录 题目描述 B1080 MOOC期终成绩 解题思路 可利用 map 将字符串型的学号转换为整型的序号,方便查找.输入全部成绩后,遍历每个学生同时计算最终成绩,然后将成 ...