【原创】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资料,真的,就没有一个系统的, ...
随机推荐
- golang开发:类库篇(四)配置文件解析器goconfig的使用
为什么要使用goconfig解析配置文件 目前各语言框架对配置文件书写基本都差不多,基本都是首先配置一些基础变量,基本变量里面有环境的配置,然后通过环境变量去获取该环境下的变量.例如,生产环境跟测试环 ...
- 个人用户永久免费，可自动升级版Excel插件，使用VSTO开发，Excel催化剂安装过程详解及安装失败解决方法
因Excel催化剂用了VSTO的开发技术,并且为了最好的用户体验,用了Clickonce的布署方式(无需人工干预自动更新,让用户使用如浏览器访问网站一般,永远是最新的内容和功能).对安装过程有一定的难 ...
- windows下挂载linux的nfs网络硬盘
挂载命令,速度快 mount \\10.8.200.167\goworkspace z: -o nolock,rsize=1024,wsize=1024,timeo=15 安装步骤 yum insta ...
- 自动生成Mybatis的Mapper文件
自动生成Mybatis的Mapper文件 工作中使用mybatis时我们需要根据数据表字段创建pojo类.mapper文件以及dao类,并且需要配置它们之间的依赖关系,这样的工作很琐碎和重复,myba ...
- 【数据结构】B树、B+树详解
B树 前言 首先,为什么要总结B树.B+树的知识呢?最近在学习数据库索引调优相关知识,数据库系统普遍采用B-/+Tree作为索引结构(例如mysql的InnoDB引擎使用的B+树),理解不透彻B树,则 ...
- Asp.Net MVC HttpPost用法
一个Action只能用一个http 特性,例如:HttpPost 不能与HttpGet 或者多个HttpPost重复使用,否则会出错 也可以用 [AcceptVerbs("put" ...
- Bean Validation完结篇：你必须关注的边边角角（约束级联、自定义约束、自定义校验器、国际化失败消息...）
每篇一句 没有任何技术方案会是一种银弹,任何东西都是有利弊的 相关阅读 [小家Java]深入了解数据校验:Java Bean Validation 2.0(JSR303.JSR349.JSR380)H ...
- SQL注入详解及技巧
Tip小技巧 :在白盒测试的过程中,在sql语句的下一句加上 echo $sql. '<br>'; 可以在页面中输出完整的sql语句 效果图 :
- golang-http 请求---设置header与直接发
背景 现在各种软件到处都是,写代码难免有时候需要http 调用其他的接口. 其实这个东西还挺常用,虽然很简单,但是写的时候 又忘,就像是提笔忘字,索性总结一下吧. 不需要设置header属性的http ...
- Kotlin学习快速入门（5）——空安全
介绍 kotlin中,对象可分为两种类型,可为空的对象和不可为空对象 默认为不可为空对象,代码检测如果发现不可为空对象赋予了null,则会标红报错. 可为空的对象,如果调用了方法,代码检测也会标红报错 ...