<!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. Android.mk 中常用“LOCAL_” 变量

    编写模块的编译文件,实际就是定义一系列以“LOCAL_”开头的编译变量,因此我们有必要弄明白这些变量的具体含义.下面是一些经常使用的LOCAL_编译变量的说明: 变量名 说明 LOCAL_ASSET_ ...

  2. Oracle问题之ORA-12560TNS:协议适配器错误-转载

    作者:@haimishasha本文为作者原创,转载请注明出处:https://www.cnblogs.com/haimishasha/p/5394963.html 目录 Oracle问题之ORA-12 ...

  3. 【Tomcat】配置Web界面管理

    到Tomcat的cof目录下的tomcat-users.xml文件进行配置 配置如下: <?xml version='1.0' encoding='utf-8'?><tomcat-u ...

  4. Java - "JUC" ReentrantReadWriteLock

    Java多线程系列--“JUC锁”08之 共享锁和ReentrantReadWriteLock ReadWriteLock 和 ReentrantReadWriteLock介绍 ReadWriteLo ...

  5. Java虚拟机 - 类加载机制

    [深入Java虚拟机]之四:类加载机制 类加载过程     类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个生命周期包括:加载.验证.准备.解析.初始化.使用和卸载七个阶段.它们开始的顺序如下 ...

  6. HDU1824(2-SAT)

    Let's go home Time Limit: 10000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  7. POJO、JAVABEAN、*O、EJB

    POJO: 全称:Plain Old Java Object 解释:纯洁老式的java对象.从任何类继承.也没有实现任何接口,更没有被其它框架侵入的java对象 理解:通常我们常说的实体类 BEAN: ...

  8. python 递归和二分法

    一 内置函数 1. revserd 翻转,返回的是迭代器 # 将 s 倒置 s = '不是上海自来水来自海上' # 方法一 print(s[::-1]) # 方法二 s1 = reversed(s) ...

  9. JAVA generic array 泛型数组

    在JAVA中是不支持泛型数组的,不能通过 Z[] array=new Z[10] 这样的方式来创建数组,而是使用反射Aarry.newInstance来创建: 具体代码如下: public Z[][] ...

  10. SD从零开始41-44

    [原创] SD从零开始41 科目确定(Account determination) 使用科目确定Using Account Determination 你将需要在几个不同的领域确定将要记账的科目: 用 ...