<!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. 微信小程序看上去很美

    目前不少关于 微信小程序 的文章主要集中在两各方面:一是开发技术细节:二是怎么靠此赚钱. -- “微信小程序”所处的环境 -- 2016年初,美国号召全民学编程,包括监狱服刑人员.同样,在中国要想掌握 ...

  2. SQL Server T—SQL 存储过程 触发器

    一.存储过程 存储过程是一组编译在单个执行计划中的T-SQL语句 存储过程:就像函数一样的会保存在数据库中(可编程性) 存储过程的优点: 1.允许模块化程序设计 2.允许更快执行如果某操作需要大量T- ...

  3. <!--[if IE]><script type="text/javascript" src="matrix/js/html5.js"></script><![endif]-->代码解释

    块注释例子 1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->2. <!--[if IE]> 所有的I ...

  4. [javascript] 看知乎学习js闭包

    知乎:到底什么是闭包? 寸志: JavaScript 闭包的本质源自两点,词法作用域和函数当作值传递. 词法作用域,就是,按照代码书写时的样子,内部函数可以访问函数外面的变量.引擎通过数据结构和算法表 ...

  5. Factorial Problem in Base K（zoj3621）

    Factorial Problem in Base K Time Limit: 2 Seconds Memory Limit: 65536 KB How many zeros are there in ...

  6. php pdo对象使用详解: 连接数据库与exec方法

    要使用pdo,首先需要开启pdo扩展,我这里已经开启了mysql的pdo扩展 ghostwu@dev:~$ php -m | grep pdo pdo_mysql ghostwu@dev:~$ 1,连 ...

  7. SD配置步骤清单

    定义销售组织 定义分销渠道 定义产品组 给公司代码分配销售组织 给销售组织分配销售渠道 给工厂分配销售组织.分销渠道 给销售组织分配产品组 定义销售范围 定义装运点 给工厂分配装运点 维护工厂的装运点 ...

  8. [我的阿里云服务器] —— WordPress Permalink Settings

    前言: 固定链接(Permalink)是博客日志.分类及其他博客内容列表的永久URL. 别人可以通过固定链接链接到你的文章上,你也可以在email中发送某篇日志的链接. 所有日志的URL应为永久性.固 ...

  9. 【three.js练习程序】旋转物体自身

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

  10. 全球首款完全开源的堡垒机，符合 4A 的专业运维审计系统Jumpserver

    Jumpserver是全球首款完全开源的堡垒机,是符合 4A 的专业运维审计系统. http://www.jumpserver.org https://github.com/jumpserver/ju ...