<!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. [基础篇] 玄机网C#培训课程-初级.

    课程目录 0x01第一课课前准备vs的选择与安装常用工具/网址      http://msdn.itellyou.cn/vs常用设置 0x02第二课C#的语法样式  编程风格VS的常用功能 俩个注意 ...

  2. C#获取电脑型号、系统版本、内存大小、硬盘大小、CPU信息

    摘要 有时需要获取电脑的相关信息.这时可以通过调用windows api的方式,进行获取. 方法 可以通过在powershell中 通过下面的命令进行查询,然后可以通过c#调用获取需要的信息. gwm ...

  3. POJ1458(KB12-L LCS)

    Common Subsequence Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 51319   Accepted: 21 ...

  4. DOM基础练习代码（二）

    上一篇给大家的三段代码不知到大家有没有练习呢?今天再给大家带来两段DOM的练习! 4.封装函数,实现children功能,最好哎原型链上编程 Element.prototype.getChildren ...

  5. Leaflet.draw 无法编辑multipolygon类型多边形 解决方法

    问题说明 在做面要素的编辑的时候,当对multiploygon类型的面要素进行编辑的时候,出现如下错误: TypeError: Cannot read property 'lat' of null 通 ...

  6. 解决跨域问题之anywhere

    anywhere搭建服务,ionic PC端和手机端可以通过网址来查看网页效果.解决跨域问题 大家都知道编写完HTML代码后,可以直接在pc端的浏览器查看,但现在手机端越来越广泛了,想跟在pc端查看网 ...

  7. ElementUI制作树形表组件

    提要 最近项目中需要用到树形表格来描述部门.区域之间的父子展开关系.但是已经在项目中使用的Vue的成熟组件ElementUI以及iViewUI组件都没有提供相应的树形表格组件,无奈找了其他替代方案也都 ...

  8. mongodb2.X添加权限

    1.连接mongodb数据库(如果mongo命令没有做环境变量配置,需要定位到有mongo命令的目录) root@AY140709212620347s22Z:~# mongo MongoDB shel ...

  9. GenyMotion the virtual device got no ip address 问题解决

    不要再找答案了 升级你的virtual box到最新版本(目前是 5.0.26,已通过) 如果你是windows 10系统 必须关闭hyper-v 在管理员命令行下运行bcdedit /set hyp ...

  10. 【Python】keras卷积神经网络识别mnist

    卷积神经网络的结构我随意设了一个. 结构大概是下面这个样子: 代码如下: import numpy as np from keras.preprocessing import image from k ...