<!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. JS 定时器 setTimeout 与 setInterval 的区别和用法

    定时器: window.setTimeout(function(){},间隔时间毫秒); -- 定时炸弹,延迟执行,只执行一次 window.setInterval(function(){},间隔的时 ...

  2. 浅谈Http协议是怎么回事?

    老实说关于http协议这个概念,见到最多的还是各类招聘信息.在平时的工作中,除了了解一些请求,响应,请求头这些概念外,对于http协议也没有太多的关心.因为貌似对平时的工作没有什么影响,所以在写这篇关 ...

  3. 【Spring】2、BeanFactory 和FactoryBean的区别

    转自:http://chenzehe.iteye.com/blog/1481476 1. BeanFactory BeanFactory定义了 IOC 容器的最基本形式,并提供了 IOC 容器应遵守的 ...

  4. 【Linux】查看所使用的Linux系统是32位还是64 位的方法

    查看所使用的Linux系统是32位还是64 位的方法 方法一:getconf LONG_BIT # getconf LONG_BIT 1 1 我的Linux是32位!!! 方法二:arch # arc ...

  5. 撩课-Web大前端每天5道面试题-Day35

    1.React 中 refs 的作用是什么? Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄. 我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM ...

  6. Javascript 匿名函数与闭包

    请见如下一个闭包示例: color = "red"; var obj = { color: "blue", getColor: function () { fu ...

  7. SSL certificate problem: unable to get local issuer certificate 的解决方法

    今天在进行微信开发获取微信Access_Token时,使用到了php的curl库, 在敲完代码后获取token失败,经过各种排查错误,到了下面这一步 SSL certificate problem: ...

  8. 绑定Oracle Database 到 ActiveReport

    ActiveReport 可以和多种数据源交互,包括OLEDB, SQL, XML和集合对象. 在本文中我们将阐述如何绑定Oracle 数据库到 ActiveReport . 这是一件很轻松的事情.下 ...

  9. Linux sudo 命令使用简介

    Linux sudo 命令使用简介 by:授客 QQ:1033553122 基本语法: $ sudo [-u username] [command] -u:将身份变成username的身份 #编辑/e ...

  10. C++项目通过JNI使用Java第三方jar包

    最近在C++项目中碰到了需要使用第三方公司开发的Java jar包的问题,最后使用了JNI来解决. 参考了网络上不少的方法介绍, 大多数介绍JNI的文章讲的的都是Java通过JNI来调C的本地代码,其 ...