【原创】display:flex布局大全
全都是自己写的 希望大家可以点个赞 谢谢！
Html代码（没时间精简 请多包涵）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flex布局大全</title>
<style>
body,html{
width: %;
height: %;
display: flex;
justify-content: space-between;
}
.fore{
width: 700px;
height: 277px;
margin: auto;
display: flex;
justify-content:space-around;
flex-wrap: wrap;
}
.row1,.row2,.row3{
width: 700px;
height: 95px;
display: flex;
justify-content: space-around;
}
.row1{
margin-top: 8px;
}
.father{
background-color: #;
height: 70px;
width: 70px;
border-radius: 8px ;
}
.son{
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #fff;
}
.father2{
display: flex;
justify-content: center;
}
.father3{
display: flex;
justify-content: flex-end;
}
.father4{
display: flex;
justify-content: space-between;
}
.father5{
display: flex;
justify-content: flex-end;
}
.foreSom{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.father6{
display: flex;
justify-content: space-between;
} .foreSon32{
display: flex;
flex-direction: column;
justify-content: center;
}
.foreSon33{
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.father7{
display: flex;
justify-content: space-between;
}
.foreSon51{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.foreSon52{
display: flex;
flex-direction: column;
justify-content: center;
}
.foreSon53{
display: flex;
flex-direction: column;
justify-content: space-between;
} /* 第二行 */
.father2-{
display: flex;
justify-content: flex-start;
align-items: center;
}
.father2-{
display: flex;
justify-content: center;
align-items: center;
}
.father2-{
display: flex;
justify-content: flex-end;
align-items: center;
}
.father2-{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.father2-{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.father2-{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.foreSon2-{
display: flex;
flex-direction: column;
justify-content: space-between;
} .father2-{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.foreSon2-{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.father3-{
display: flex;
align-items: flex-end;
}
.father3-{
display: flex;
align-items: flex-end;
justify-content: center;
}
.father3-{
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.father3-{
display: flex;
}
.foreSon3--{
display: flex;
}
.foreSon3--{
align-self: center;
}
.father3-{
display: flex;
justify-content: space-between;
}
.foreSon3--{
align-self: center;
}
.father3-{
display: flex;
justify-content: space-between;
}
.foreSon3--{
align-self: flex-end;
}
.father3-{
display: flex;
flex-wrap: wrap;
}
.foreSon3--{
display: flex;
flex-basis: %;
justify-content: space-between;
}
.foreSon3--{
display: flex;
flex-basis: 70px;
justify-content: center;
}
.foreSon3--{
display: flex;
justify-content: space-between;
flex-basis: %;
} </style>
</head>
<body>
<div class="fore">
<div class="row1">
<div class="father">
<div class="son1 son"></div>
</div>
<div class="father father2">
<div class="son1 son"></div>
</div>
<div class="father father3">
<div class="son1 son"></div>
</div>
<div class="father father4">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
<div class="father father5">
<div class="foreSom">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
</div>
<div class="father father6">
<div class="foreSon31">
<div class="son1 son"></div>
</div>
<div class="foreSon32">
<div class="son1 son"></div>
</div>
<div class="foreSon33">
<div class="son1 son"></div>
</div>
</div>
<div class="father father7">
<div class="foreSon51">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
<div class="foreSon52">
<div class="son1 son"></div>
</div>
<div class="foreSon53">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
</div> </div>
<div class="row2">
<div class="father father2-1">
<div class="son1 son"></div>
</div>
<div class="father father2-2">
<div class="son1 son"></div>
</div>
<div class="father father2-3">
<div class="son1 son"></div>
</div>
<div class="father father2-4">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
<div class="father father2-5">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
<div class="father father2-6">
<div class="foreSon2-6">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
<div class="foreSon2-6">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
</div>
<div class="father father2-7">
<div class="foreSon2-7">
<div class="son1 son"></div>
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
<div class="foreSon2-7">
<div class="son1 son"></div>
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
</div>
</div>
<div class="row3">
<div class="father father3-1">
<div class="son1 son"></div>
</div>
<div class="father father3-2">
<div class="son1 son"></div>
</div>
<div class="father father3-3">
<div class="son1 son"></div>
</div>
<div class="father father3-4">
<div class="foreSon3-4-1">
<div class="son1 son"></div>
</div>
<div class="foreSon3-4-2">
<div class="son1 son"></div>
</div>
</div>
<div class="father father3-5">
<div class="foreSon3-5-1">
<div class="son1 son"></div>
</div>
<div class="foreSon3-5-2">
<div class="son1 son"></div>
</div>
</div>
<div class="father father3-6">
<div class="foreSon3-6-1">
<div class="son1 son"></div>
</div>
<div class="foreSon3-6-2">
<div class="son1 son"></div>
</div>
</div>
<div class="father father3-7">
<div class="foreSon3-7-1">
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
<div class="foreSon3-7-2">
<div class="son1 son"></div>
</div>
<div class="foreSon3-7-3">
<div class="son1 son"></div>
<div class="son1 son"></div>
<div class="son1 son"></div>
</div>
</div>
</div>
</div> </body>
</html>
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
全都是自己写的 希望大家可以点个赞！！！（顺便凑下字数）
【原创】display:flex布局大全的更多相关文章
- 1.display:flex布局笔记
/*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的flo ...
- display:flex 布局教程，弹性布局！
display:flex 布局教程 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...
- display:flex布局
/*背景 居中 自适应 铺满容器*/ background: center / cover; flex布局是什么? flex是Flexibe Box 的缩写,意思为”弹性布局”, 用来为盒子模型提供最 ...
- HTML/CSS：display:flex 布局教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- display:flex 布局详解（2）
1. flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现 HTML代码: <div class=" ...
- display: flex; 布局
废话不多说,供上我学习Flex布局的启蒙文章,一切的答案,尽在这里,仔细阅读,多多回味!保证你有所收获! http://www.ruanyifeng.com/blog/2015/07/flex-gra ...
- display:flex 布局之 骰子
代码部分 html <body> <div class="box"> <div class="a a1"> <span ...
- flex布局大全 2019
有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...
- flex布局大全
有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...
随机推荐
- NOIp 2018 普及&提高组试题答案
你们考的咋样呢?在评论区说出自己的分数吧!
- python递归-三元表达式-列表生成式-字典生成式-匿名函数-部分内置函数-04
递归 递归: # 函数在调用阶段直接或间接地又调用了自身 应用场景: # 将列表中的数字依次打印出来(循环的层数是你必须要考虑的点) --> l = [1, [2, [3, [4, [5, ...
- AbstractList
概述 此类提供 List 接口的骨干实现,以最大限度地减少实现“随机访问”数据存储(如数组)支持的该接口所需的工作.对于连续的访问数据(如链表),应优先使用 AbstractSequentialLis ...
- 前端插件之Select2使用
工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了bootstrap-duallistbox这个插件的使用,这一篇开始Select2的征服之旅 Se ...
- LVS + Keepalived + Nginx基于DR模式构建高可用方案
在大型网站中一般服务端会做集群,同时利用负载均衡器做负载均衡.这样有利于将大量的请求分散到各个服务器上,提升网站的响应速度.当然为了解决单点故障的问题,还会做热备份方案.这里演示利用LVS做负载均衡器 ...
- Django REST framework的使用简单介绍
官方文档:https://www.django-rest-framework.org/ GitHub源码:https://github.com/encode/django-rest-framework ...
- HttpsUtils
package io.renren.modules.jqr.util; import java.io.BufferedReader; import java.io.InputStream; impor ...
- cookie池的维护
存储形式: 存储在redis中,“spider_name:username–password":cookie 建立py文件及包含方法: initcookies() 初始化所有账号的cooki ...
- Sring 的 @AliasFor 使用规则
一.该标签存在的意义 顾名思义 @AliasFor 表示别名,它可以注解到自定义注解的两个属性上,表示这两个互为别名,也就是说这两个属性其实同一个含义.该标签存在的含义,从网上查发现有个点, 若 自 ...
- win10教育版激活错误:在运行 Microsoft Windows 非核心版本的计算机上,运行"slui.exe ...”
折腾了一天,最终轻松解决,先启用Software Protection服务,在激活(密钥或者工具都行). PS:但是这样还是无法解决Software Protection自动停止的问题,这个可以参考网 ...