Flex实现九宫格

news/2024/6/16 7:09:22 标签: 前端

写一个靠谱的flex布局

clipboard.png

<!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可以成为正方形。


http://www.niftyadmin.cn/n/1114587.html

相关文章

十一、jdk命令之Jstatd命令(Java Statistics Monitoring Daemon)远程的监控工具连接到本地的JVM执行命令...

目录 一、jdk工具之jps&#xff08;JVM Process Status Tools&#xff09;命令使用 二、jdk命令之javah命令(C Header and Stub File Generator) 三、jdk工具之jstack(Java Stack Trace) 四、jdk工具之jstat命令(Java Virtual Machine Statistics Monitoring Tool) 四、jdk工具…

【c++程序】用起泡法对十个数排序(由小到大)

#include<iostream> using namespace std; int main() {int a[10];int i,j,k;cout<<"请输入十个数字&#xff1a;"<<endl;for(i0;i<10;i)cin>>a[i];cout<<endl;for(j0;j<9;j)for(i0;i<9-j;i)if(a[i]>a[i1]){ka[i];a[i]a[i…

C4.5分类决策树算法

C4.5是机器学习算法中的分类决策树算法,对于一个具有多个属性的元组&#xff0c;用一个属性就将它们完全分开几乎不可能&#xff0c;否则的话&#xff0c;决策树的深度就只能是2了。从这里可以看出&#xff0c;一旦我们选择一个属性A&#xff0c;假设将元组分成了两个部分A1和A…

Linux 第20天自习 进程作业管理

Linux 第20天自习 进程作业管理时间: 20180807目录进程间通信进程类型进程状态进程的管理命令ps, pgrep, pidof, top, htop, vmstat, glances, dstat, kill, killall作业管理bg, fg, jobs, nohup调整进程优先级nice, reniceLinux 进程作业管理进程间通信IPC &#xff08;Inter …

【c++程序】求解一元二次方程

#include<iostream> #include <math.h> using namespace std; int main() {double a,b,c,d,x,y;cout<<"欢迎使用锤子Ethan解方程,一般式为ax^2bxc0"<<endl;cout<<"请输入系数a&#xff0c;b&#xff0c;c。"<<endl;ci…

windows环境下配置JDK环境,安装jenkins

一、windows配置JDK环境 1、下载JDK并安装 官网&#xff1a;https://www.oracle.com/java/technologies/downloads/#java8-windows 版本&#xff1a;下载版本&#xff1a;jdk-8u321-windows-x64.exe进入链接之后选择对应的版本&#xff0c;我的电脑是64位的 安装Java8包括jd…

小程序点击复制如何实现

wx.setClipboardData({ data: data, success: function(res) { wx.getClipboardData({ success: function(res) { console.log(res.data) // data } }) } }) 将要复制的内容放到data里面即可。 获取系统剪贴板的内容 wx.getClipboardData({success: function(res){ co…

GOlang eclipse install

http://golang.org/dl/ 下载golang https://codeload.github.com/GoClipse/goclipse/tar.gz/v0.8.1 解压 安装eclipse go 插件 http://goclipse.github.io/releases/ 勾选 GoClipse 下载GDB for windows http://www.equation.com/servlet/equation.cmd?fagdb 转载于:https://w…