<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
*{
padding:0;
margin:0;
}
body{
display:flex;
justify-content: space-around;

}
[class*='div']{
display: flex;
width:100px;
height:100px;
border-radius:4px;
border:1px solid red;
padding:5px;
}
[class*='div'] p{
width:15px;
height:15px;
border-radius: 50%;
margin:2px;
background-color: black;
}
.div1{
justify-content: center;
align-items: center;

}
.div2{
align-items: center;
justify-content: space-around;
flex-direction:column;

}
.div3{
justify-content: space-around;
align-items: center;

}
.div3 p:nth-child(1){
align-self: flex-start;
}
.div3 p:nth-child(3){
align-self: flex-end;
}
.div4{
justify-content: space-around;
flex-direction: column;
align-items: center;

}
.div4 div{
display: flex;
justify-content:space-around;
width:100%;
}
.div4 div p{
align-self: center;
}
.div5{
justify-content: space-around;
flex-direction:column;
align-items: center;
}
.div5 div{
display:flex;
justify-content: space-around;
width:100%;
align-items: center;

}
.div5 div p{
align-self: center;
}

.div6{
justify-content: space-around;
flex-direction:column;
align-items: center;
}
.div6 div{
display:flex;
justify-content: space-around;
width:100%;
align-items: center;

}
.div6 div p{
align-self: center;
}
.div8{
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.div8 div{
display:flex;
justify-content: space-between;
width:100%;
}
.div8 div p{
align-self: center;
}

</style>
<body>
<!--筛子布局-->
<div class="div1">
<p></p>
</div>
<div class="div2">
<p></p>
<p></p>

</div>
<div class="div3">
<p></p>
<p></p>
<p></p>
</div>
<div class="div4">
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>

</div>
<div class="div5">
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
</div>
<div class="div6">
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
</div>
<div class="div6">
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
</div>
<div class="div8">
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
</div>
</body>
</html>

有意思的flex 色子布局的更多相关文章

  1. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  2. 记一下flex弹性布局

    flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...

  3. CSS3动画属性和flex弹性布局各个属性

    [CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...

  4. flex 输入框布局

    1:创建一个弹性容器(display:flex) 2:构建2个或3个弹性项目. 3:把弹性项目设置为居中对齐.(align-items:center) 4:改变input自身对齐方式,把它设置为拉伸以 ...

  5. flex弹性布局心得

    概述 最近做项目用flex重构了一下网页中的布局,顺便学习了一下flex弹性布局,感觉超级强大,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Solved by Flexbo ...

  6. 整理CSS中display flex（布局利器）

    关于display:flex布局,有人了解颇深,我也是看着别人的东西学习的. display:flex的布局是什么.基本概念之类的我根本就不了解,只会用.每次看到概念之类的东西,我都是扫一眼就过去. ...

  7. flex弹性布局属性详解！

    详细看下flex弹性布局具体属性: flex容器属性详解:flex-direction:row/column:(横排/竖排) 决定元素的排列方向:flex-wrap:nowrap/wrap/wrap- ...

  8. flex图片布局

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>f ...

  9. java基础之Flex弹性布局、JSP错误处理以及Log4J

    一.Flex弹性布局 1.产生的比较晚,目前在移动网页开发中可以使用,而且逐渐成为主流. 在桌面网页开发中使用的比较少(主要是桌面浏览器的兼容性问题更加严重) 2.开启方法: 在容器标签上加上 dis ...

随机推荐

  1. 基于spring boot 2.x 的 spring-cloud-admin 实践

    spring cloud admin 简介 Spring Boot Admin 用于监控基于 Spring Boot 的应用,它是在 Spring Boot Actuator 的基础上提供简洁的可视化 ...

  2. JVM 内存初学 (堆(heap)、栈(stack)和方法区(method) )（转载）

    想想面试的时候很多会问jvm这方面的问题虽然还是菜鸟不太能用到现在但是还是了解一下, 找资料的时候看见个大佬写的很好转载到这方便以后自己复习和给大佬做宣传 以下为大佬的博客原文: 这两天看了一下深入浅 ...

  3. Idea的Maven项目引入模块

    File->Project Structures->Modules 点击那个加号,选择Import Module

  4. python学习之老男孩python全栈第九期_day005知识点总结

    1. 数据类型划分: (1) 不可变数据类型(可哈希): 元组, bool, int(123 就是123,不会变成其他数), str, 字典的keys (2) 可变数据类型(不可哈希): 列表list ...

  5. python+redis简单实现发红包程序

    redis是什么? Redis 是一个高性能的key-value数据库! 想进一步了解请移步搜索引擎自行查找. 编写这个小程序的目的就是对redis进行一个简单的小操作,对redis有一个初步的了解, ...

  6. Geolocation API

    Geolocation API--地理定位 navigator.geolocation getCurrentPosition() 触发请求用户共享地理定位信息的对话框 接收3个参数: 1.成功回调函数 ...

  7. BZOJ4358: permu(带撤销并查集 不删除莫队)

    题意 题目链接 Sol 感觉自己已经老的爬不动了.. 想了一会儿,大概用个不删除莫队+带撤销并查集就能搞了吧,\(n \sqrt{n} logn\)应该卡的过去 不过不删除莫队咋写来着?....跑去学 ...

  8. structs2.8创建拦截器

    控制层 public class PrintUsername { private String username; public String getUsername() { return usern ...

  9. selector设置按钮或者一些点击控件在点击时的效果

    <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="ht ...

  10. vue与原生混合开发

    前段时间,做了一个混合开发的项目,主要是以vue框架开发h5页面,使用cordova作为中间沟通桥梁,实现了h5与安卓.iOS的混合开发,由于从事iOS开发,h5也是刚接触不久,很多深入原理还不太清楚 ...