复习 | 彻底弄懂Flexbox之Demo篇
flexbox之前有接触,写项目时也用过,但也只是简单的,对其也是似懂非懂,所以今天下定决心把这个再学一遍,因为似懂非懂就是不懂
本文主要是的demo演示,想看flexbox语法 请移步flexbox语法
本文主要分两大部分:flexbox的Demo与常见的布局
以下demo的图片与css代码从左至右从上到下一一对应
flexbox的Demo
单元素demo四个角
html
<div class='box-1'>
<span>一</span>
</div>
css
.box-1{
/* 一个元素 */
左上角
display: flex;
/* 右上角 */
justify-content: flex-end;
/* 左下角 */
align-items: flex-end;
/* 右下角 */
justify-content: flex-end;
align-items: flex-end;
}
单元素居中
html
<div class='box-1'>
<span>一</span>
</div>
css
.box-1{
/* 顶部水平居中 */
justify-content: center;
/* 左垂直居中 */
align-items: center;
/* 右垂直居中 */
justify-content: flex-end;
align-items: center;
/* 垂直和水平居中 */
justify-content: center;
align-items: center; */
/* 底部水平居中 */
justify-content: center;
align-items: flex-end;
}
二个元素对齐方式
html
<div class='box-1'>
<span>一</span>
<span>二</span>
</div>
css
.box-1{
/* 二个元素 */
display: flex;
/* 水平两端对齐,项目之间的间隔都相等*/
justify-content: space-between;
/* 左垂直两端对齐,项目之间的间隔相等 flex-direction: column : 主轴为垂直方向,起点在上沿。*/
flex-direction: column;
justify-content: space-between;
/* 垂直居中两端对齐,项目之间的间隔相等 flex-direction: column : 主轴为垂直方向,起点在上沿。align-items这时就代表水平方向*/
flex-direction: column;
justify-content: space-between;
align-items: center;
/* 右垂直两端对齐,项目之间的间隔相等 */
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
/* 水平居中两端对齐,项目之间的间隔都相等 */
justify-content: space-between;
align-items: center;
/* 底部两端对齐,项目之间的间隔都相等 */
justify-content: space-between;
align-items: flex-end;
}
/* 两元素左对角对齐 */
.box-1{
justify-content: space-between;
}
span:nth-child(2){
align-self: flex-end;
}
三元素对齐
html
<div class='box-1'>
<span>一</span>
<span>二</span>
<span>三</span>
<div>
css
.box-1{
/* 三元素左对角对齐 */
justify-content: space-between;
/* 倒三角 */
justify-content: space-between;
}
/* 三元素左对角对齐 */
span:nth-child(2){
align-self: center;
}
span:nth-child(3){
align-self: flex-end;
}
/* 倒三角 */
span:nth-child(2){
align-self: flex-end;
}
13个元素换行操作
html
<div class='box-1'>
<span>一</span>
<span>二</span>
<span>三</span>
<span>四</span>
<span>五</span>
<span>六</span>
<span>七</span>
<span>八</span>
<span>九</span>
<span>十</span>
<span>十一</span>
<span>十二</span>
<span>十三</span>
</div>
css
.box-1{
/* 十三元素换行操作 */
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-content: space-between;
}
四个元素占满4个角
html
<div class="box-2">
<div class="column">
<span>1</span>
<span>2</span>
</div>
<div class="column">
<span>3</span>
<span>4</span>
</div>
</div>
css
.box-2 {
float: left;
width: 400px;
height: 400px;
border: solid 1px black;
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.column {
flex-basis: 100%;
display:flex;
justify-content: space-between; }
.column span{
display: inline-block;
text-align: center;
color: #fff;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #000;
}
9元素水平和垂直平分容器
html
<div class="box-3">
<div class="row">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="row">
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<div class="row">
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
css
.box-3 {
width: 180px;
height: 190px;
border: solid 1px black;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.row{
flex-basis: 100%;
display: flex;
justify-content: space-between;
flex:;
}
.box-3 span {
display: inline-block;
text-align: center;
color: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #000;
}
常见的布局
html
<h1>网格布局</h1>
<div class="grid grid1">
<div class="grid-cell u-lof2" >1/2</div>
<div class="grid-cell">auto</div>
<div class="grid-cell u-lof3">1/3</div>
<div class="grid-cell u-lof3">1/3</div>
<div class="grid-cell">auto</div>
<div class="grid-cell u-lof3">1/3</div>
<div class="grid-cell u-lof4">1/4</div>
<div class="grid-cell u-lof3">1/3</div>
<div class="grid-cell">auto</div>
</div>
css
.grid {
display: flex;
margin:30px auto;
width: 100%;
text-align: center;
border-radius:6px;
background-color: #eee;
box-shadow: 0 2px 10px 0 #111 ,
insert 0 2px 0 0 #fff;
}
.grid .grid-cell{
margin: 10px;
height: 30px;
border-radius: 5px;
background-color: #454545;
line-height: 30px;
text-align: center;
color: #fff;
}
.grid1 {
display: flex;
flex-wrap: wrap;
}
.grid1 .grid-cell{
flex:;
}
.grid1 .u-lof2 {
flex:0 0 50%;
}
.grid1 .u-lof3{
flex: 0 0 33.333%;
}
.grid1 .u-lof4{
flex: 0 0 25%
}
html
<h1>圣杯布局</h1>
<div class="grid holy-grid">
<div class="header">header</div>
<div class="content">
<div class="nav">nav</div>
<div class="main">main</div>
<div class="ads">ads</div>
</div>
<div class="footer">footer</div>
</div>
css
.holy-grid {
display: flex;
flex-direction: column;
}
.holy-grid .header,
.holy-grid .footer{
flex:;
height: 40px;
background-color: #676767;
line-height: 40px;
color: #fff;
}
.holy-grid .header {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.holy-grid .footer {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.holy-grid .content{
display: flex;
flex:;
min-height: 300px;
line-height: 300px;
}
.holy-grid .nav,
.holy-grid .ads{
flex: 0 0 70px;
}
.holy-grid .main{
flex:;
}
.holy-grid .nav {
order:;
background-color: #a1a1a1;
}
.holy-grid .ads {
background-color: #d3d3d3;
}
html
<h1>悬挂式布局</h1>
<div class="Media">
<img src="./jr.png" alt="" class="Media-figure">
<div class="Media-body">
<p class="body-title">JR禁赛真正原因曝光:他向助教身上撒了一碗汤</p>
<div class="body-content">
腾讯体育讯(文/Brian Windhorst和Dave McMenamin,ESPN撰稿人) 北京时间3月3日,据ESPN报道,骑士后卫JR-史密斯被球队禁赛一场的原因曝光,原来是因为他向助理教练达蒙-琼斯身上撒了一碗汤。
</div>
</div>
</div>
css
.Media {
display: flex;
align-items: flex-start; }
.Media-figure {
margin-right: 1em;
width: 200px;
height: 100px;
}
.Media-body {
border-radius: 5px;
background-color: #eee;
flex:;
height: 100px;
}
.Media-body .body-title{
font-weight: bold;
margin:;
}
.Media-body .body-content {
margin:;
}
注意:设置align-items属性时必须保证容器有高度
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
这两者是等价的,三者含义见flexbox语法
参考文献:
https://codepen.io/lcc19941214/pen/vLdVNg
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
复习 | 彻底弄懂Flexbox之Demo篇的更多相关文章
- 30分钟彻底弄懂flex布局
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由elson发表于云+社区专栏 目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布 ...
- 彻底弄懂JS的事件冒泡和事件捕获(不推荐阅读)
由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其 ...
- 彻底弄懂LSH之simHash算法
马克·吐温曾经说过,所谓经典小说,就是指很多人希望读过,但很少人真正花时间去读的小说.这种说法同样适用于“经典”的计算机书籍. 最近一直在看LSH,不过由于matlab基础比较差,一直没搞懂.最近看的 ...
- SQL Server-聚焦NOLOCK、UPDLOCK、HOLDLOCK、READPAST你弄懂多少?(三十四)
前言 时间流逝比较快,博主也在快马加鞭学习SQL Server,下班回来再晚也不忘记更新下博客,时间挤挤总会有的,现在的努力求的是未来所谓的安稳,每学一门为的是深度而不是广度,求的是知识自成体系而不是 ...
- 彻底弄懂AngularJS中的transclusion
点击查看AngularJS系列目录 彻底弄懂AngularJS中的transclusion AngularJS中指令的重要性是不言而喻的,指令让我们可以创建自己的HTML标记,它将自定义元素变成了一个 ...
- Golang, 以 9 个简短代码片段,弄懂 defer 的使用特点
作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...
- 一文弄懂神经网络中的反向传播法——BackPropagation【转】
本文转载自:https://www.cnblogs.com/charlotte77/p/5629865.html 一文弄懂神经网络中的反向传播法——BackPropagation 最近在看深度学习 ...
- 弄懂flex布局
目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...
- [转]js模块化编程之彻底弄懂CommonJS和AMD/CMD!
原文: https://www.cnblogs.com/chenguangliang/p/5856701.html ------------------------------------------ ...
随机推荐
- 跟我一起学.NetCore之配置变更监听
前言 通常程序中配置少不了,配置的修改也避免不了,配置的热更新为此给应用程序带来很大的便捷,不用重启,提高用户体验:但往往有时候需要对修改进行审计,也就是需要记录,有时候也会针对配置修改的时候触发相关 ...
- 创建SpringMVC项目
学习SpringMVC框架第一步,先创建一个简单项目,了解流程.使用的是Eclipse+Tomcat9.0 创建项目springmvc 新建Dynamic Web Project File->N ...
- CSS动画实例:移动的眼珠子
适当地利用CSS的box-shadow可以构造图形,然后可以对构造的图形添加动画效果.下面我们通过移动的眼珠子.圆珠一二三.一分为四.四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使 ...
- aarch64 packages 地址链接收集
1.http://dl.fedoraproject.org/pub/epel/7/aarch64 2.https://rpmfind.net/linux/epel/7/aarch64/ 3.http: ...
- 简单实现C++Stack模板
栈的特点是先进后出以及只能在栈顶进行插入和删除操作 本次实现的栈的基本操作: 1)弹栈 2)压栈 3)求栈大小 4)求栈容量 5)判断栈空 6)获取栈顶元素 1.用数组的方式实现栈基本操作 /** * ...
- Mybatis—curd
Mybatis简介: MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为 ...
- vs _ 用户代码片段 _ html模板
自定义模板:首选项 -> 用户代码片段 - >(如果没有自己创个)html.json t : 表示缩进 n:表示换行 ----------------------------------- ...
- java实现邮箱发送信息--验证码的发送(163邮箱)
1.maven环境 <!-- 发送邮件 --> <dependency> <groupId>javax.mail</groupId> <artif ...
- VS2015+opencv3.1.0 imshow()函数出现中文乱码----问题一
Visual Studio提供高级保存选项功能,它能指定特定代码文件的编码规范和行尾所使用的换行符.在Visual Studio 2015中,该命令没有默认显示在“文件”菜单中.用户需要手工设置,才能 ...
- 2020重新出发,MySql基础,MySql数据库备份与恢复
@ 目录 MySQL数据库备份与恢复 数据库为什么需要备份 MySQL备份类型 MySQL热备份及恢复 逻辑备份 mysqldump SELECT INTO-OUTFILE mydumper 裸文件备 ...