写一个靠谱的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. day26-socket(server和client通信)

    # socket是应用层与TCP/IP协议通信的中间软件抽象层,它是一组接口.它把复杂的TCP/IP协议隐藏到socket #接口的后面,让socket去组织数据,以符合指定的协议. # socket ...

  2. bootstrap 学习 ---css样式学习

    bootstrap 适用于响应式布局,移动设备优先的web项目 1.学习bootstrap需要引入bootstrap的css,jquery,bootstrap的js,注意:jquery文件必须在boo ...

  3. TCP与UDP 笔记

    本文整理自:<图解TCP/IP 第5版>作者:[日] 竹下隆史,[日] 村山公保,[日] 荒井透,[日] 苅田幸雄 著译者:乌尼日其其格出版时间:2013-07 TCP提供可靠的通信传输, ...

  4. 96）PHP，文件上传（2）

    (1)那么既然看到文件即使上传成功,但是只是在脚本周期内有效,脚本只要结束(脚本结束其实很快的),文件就会自动消失,那么怎么才能永久存储文件呢: 函数: Move_uploaded_file(上传临时 ...

  5. java课java方法动手动脑

    动手动脑: import java.util.Scanner; public class Random { public static void main(String[] args) {       ...

  6. ESTScan|EORF|Augustus|nr|PSM|

    生物信息学方法的目的有二:1.常规找鉴定已知蛋白2.鉴定新蛋白 控制数据库大小可以通过增多酶切使得大数据库灵敏性增高数据量变小: 分步搜索是对于经典方法使用后找不到的新蛋白进行补充挖掘,预测蛋白与高可 ...

  7. MySQL性能优化的21条最佳经验

    英文原文:<Top 20+ MySQL Best Practices>,编译:陈皓 今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只 ...

  8. IntelliJ IDEA 的便捷操作性

    快捷键 说明 IntelliJ IDEA 的便捷操作性,快捷键的功劳占了一大半,对于各个快捷键组合请认真对待.IntelliJ IDEA 本身的设计思维是提倡键盘优先于鼠标的,所以各种快捷键组合层出不 ...

  9. import org.apache.commons.codec.binary.Base64;

    import org.apache.commons.codec.binary.Base64;

  10. SHELL用法五（Case语句）

    1.SHELL编程Case语句案例实战 1)Case选择条件语句的格式: case $INPUT in Pattern1) 语句1 ;; Pattern2) 语句2 ;; esac 2)Case语句企 ...