flex 弹性盒模型的一些例子；
1.垂直居中
<!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>Document</title> <style>
* {
margin: 0;
padding: 0;
}
.box1 {
display: flex;
align-items: center;
}
</style>
</head> <body>
<div class="box1">
<span>dkfjkfdk</span>
<div>
<img src="img/1.png" alt="">
</div> </div>
</body>
</html>
②.元素垂直平分剩余空间
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} #box {
height: 300px;
border: 1px solid black;
/*/*新版。*/
display: flex;
/*设置主轴方向为水平方向*/
flex-direction: column;
/*row 水平 和column 垂直
/*以上为新版*/
/*旧版*/
/*display: -webkit-box;*/
/*设置主轴方向为水平方向*/
/*-webkit-box-orient: horizontal;*/
/*-webkit-box-orient: vertical;*/
} #box div {
width: 50px;
height: 50px;
background: red;
font-size: 40px;
color: #fff;
margin: auto;
}
</style>
</head> <body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body> </html>
③.水平居中
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} #box {
height: 300px;
border: 1px solid black;
/*/*新版。*/
/*display: flex;*/
/*设置主轴方向为水平，元素排列为反序*/
/*flex-direction: row-reverse;*/
/*新版反序从右侧开始*/
/*/////////////////////////////*/
/*设置主轴方向为垂直，元素排列为反序*/
/*flex-direction: column-reverse;*/
/*旧版*/
display: -webkit-box;
/*需要借助:设置主轴方向为水平方向，*/
/*-webkit-box-orient: horizontal;*/
/*新版反序从左侧开始*/
/*元素在主轴方向为反序*/
/*-webkit-box-direction: reverse;*/
/*/////////////////////////////*/
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
} #box div {
width: 50px;
height: 50px;
background: red;
font-size: 40px;
color: #fff;
margin: auto;
}
</style>
</head> <body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div> </div>
</body> </html>
④.水平方向富裕空间管理
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} #box {
height: 300px;
border: 1px solid black;
/*/*新版。*/
display: flex;
/*元素在主轴开始位置，富裕空间在主轴的结束位置*/
/*justify-content: flex-start;*/
/*元素在主轴结束位置，富裕空间在主轴开始位置*/
/*justify-content: flex-end;*/
/*元素在主轴中间，富裕空间在主轴两侧*/
/*justify-content: center;*/
/*富裕空间平均分配在每两个元素之间*/
justify-content: space-between;
/*广播体操一臂，平均分配在每个元素两侧*/
/* justify-content: space-around; */
/*旧版*/
/*display: -webkit-box;*/
/*元素在主轴开始位置，富裕空间在主轴的结束位置*/
/*-webkit-box-pack: start;*/
/*元素在主轴结束位置，富裕空间在主轴开始位置*/
/*-webkit-box-pack:end;*/
/*元素在主轴中间，富裕空间在主轴两侧*/
/*-webkit-box-pack:center;*/
/*富裕空间平均分配在每两个元素之间*/
/*-webkit-box-pack:justify;*/
/*没有广播体操*/
} #box div {
width: 50px;
height: 50px;
background: red;
font-size: 40px;
color: #fff;
}
</style>
</head> <body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div> </div>
</body> </html>
⑤.垂直方向富裕空间管理
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} #box {
height: 300px;
border: 1px solid black;
/*/*新版。*/
display: flex;
/*元素在侧轴开始位置，富裕空间在侧轴结束位置*/
/*align-items: flex-start;*/
/*元素在侧轴开始结束，富裕空间在侧轴开始位置*/
align-items: flex-end;
/*元素在侧轴中间，富裕空间在侧轴开始位置*/
/*align-items:center;*/
/*根据侧轴上文字的基线对齐*/
/*align-items:baseline;*/
/*旧版*/
/* display: -webkit-box; */
/*元素在侧轴开始位置，富裕空间在侧轴结束位置*/
/* -webkit-box-align: start; */
/*元素在侧轴开始结束，富裕空间在侧轴开始位置*/
/* -webkit-box-align: end; */
/*元素在侧轴中间，富裕空间在侧轴开始位置*/
/* -webkit-box-align:center; */
} #box div {
width: 50px;
height: 50px;
background: red;
font-size: 30px;
color: #fff;
} #box div:nth-child(2) {
line-height: 50px;
}
</style>
</head> <body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body> </html>
⑥.元素弹性空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
#box{
height: 300px;
border: 1px solid black;
/*/*新版。*/
display: flex; /*旧版*/
/*display: -webkit-box;*/ }
#box div{
/*新版加给子级*/
flex-grow: 1;
/*计算:子元素的尺寸=盒子的尺寸*子元素的box-flex属性值*/
-webkit-box-ordinal-group:1 ;
width: 50px;
height: 50px;
background: red;
font-size: 30px;
color: #fff;
border: 1px solid black;
}
#box div:nth-child(2){
width: 100px;
flex-grow:2;
} </style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
⑦.元素具体位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
#box{
height: 300px;
border: 1px solid black;
/*/*新版。*/
/*display: flex;*/ /*旧版*/
display: -webkit-box; }
#box div{
/**/
-webkit-box-ordinal-group:1 ;
width: 50px;
height: 50px;
background: red;
font-size: 30px;
color: #fff;
border: 1px solid black;
}
#box div:nth-child(1){
/*数值越小越靠前，可以接受0或负值*/
/*order:4;*/
/*老版*/
/*数值越小越靠前，可以接受0或负值*/
-webkit-box-ordinal-group:3 ;
}
#box div:nth-child(2){
/*order: 2;*/
/*老版*/
-webkit-box-ordinal-group:3 ;
}
#box div:nth-child(3){
/*order: 3;*/
/*老版*/
-webkit-box-ordinal-group:-2 ;
}
#box div:nth-child(4){
/*order: 1;*/
/*老版*/
-webkit-box-ordinal-group:1 ;
} </style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
⑧.文字垂直居中
.activity {
display: flex;
flex-direction: column;
justify-content: center
}
<div class="activity">
活动
</div>
文字垂直居中
flex 弹性盒模型的一些例子；的更多相关文章
- Flex 弹性盒模型
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Web的Flex弹性盒模型
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- 彻底搞懂flex弹性盒模型布局
为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...
- box flex 弹性盒模型（转载）
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
- columns分栏与flex弹性盒模型
columns 分栏 值:column-width:设置每列的宽度 column-count:设置列数 例:columns{200px 3} 列数和宽度固定 co ...
- flex弹性盒模型
flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,类似于float:left; 比float的好处是容器没有设置高度,会根据项目来自适应高度,我们都知道,设置floa ...
- 彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
- Flex弹性盒模型（新老版本完整）--移动端开发整理笔记（二）
Flex布局 Flex即Flexible Box,写法为:display:flex(旧版:display: -webkit-box) 在Webkit内核下,需要加-webkit前缀: .box{ di ...
随机推荐
- 2021-2-28：调用 System.gc() 后究竟发生了什么？
首先,根据 DisableExplicitGC 这个 JVM 启动参数的状态,确定是否会 GC,如果需要 GC,不同 GC 会有不同的处理. 1. G1 GC 的处理 如果是 System.gc() ...
- Java获取微信公众号新增用户事件
一.新建项目工程 新建一个spring项目 填写 Group 和 Artifact 信息 这步可以直接跳过,后面再按需导入 选择工程地址 二.配置 pom.xml <dependencies&g ...
- 【图像处理】使用OpenCV+Python进行图像处理入门教程（二）
这篇随笔介绍使用OpenCV进行图像处理的第二章 图像的运算,让我们踏上继续回顾OpenCV进行图像处理的奇妙之旅,不断地总结.回顾,以新的视角快速融入计算机视觉的奥秘世界. 2 图像的运算 复杂的 ...
- 08、元组tuple
元组(tuple) 是一个有序且不可变的容器,在里面可以存放多个不同类型的元素 元组是在最后多一个逗号,用于表示它是一个元组 tuple = (11,22,'阿斯顿','媚媚',) #后面多加一个逗号 ...
- ASP.NET Core扩展库之实体映射
在分层设计模式中,各层之间的数据通常通过数据传输对象(DTO)来进行数据的传递,而大多数情况下,各层数据的定义结构大同小异,如何在这些定义结构中相互转换,之前我们通过使用AutoMapper库,但Au ...
- python-＠函数装饰器
例如@classmethod,@staticmethod的本质就是函数装饰器,其中,classmethod和staticmethod都是python的内置函数 使用@引用已有的函数后,可用于修饰其他函 ...
- NameError: name 'foo' is not defined Python常见错误
1.变量或者函数名拼写错误 2.在一个定义新变量中使用增值操作符 没有定义的变量被引用时候会出现此错误
- CDN域名解析问题
CDN域名解析问题 之前配置CDN域名解析,碰到一个配置带www的域名和不带www的域名,这里就有个解析的坑,已经将cdn域名都配置好的,但是一直访问不了,白屏现象 后面排除源站问题和cdn配置问题, ...
- 面试题-你听过TCP Fast Open (TFO/TCP快速打开)吗？能解释一下吗？
TCP Fast Open (TFO/TCP快速打开) TCP快速打开(TCP Fast Open,TFO)是什么? TCP快速打开(TCP Fast Open,TFO)是对TCP的一种简化握手手续的 ...
- 设计Web页面(2)
1.前面我们新建了一个空白的ASP.NET网页,那么接下来这章我们就讲一下设计Web页面 2.布局页面有两种方法,一种是通过Table表格来布局页面窗体,另一种是通过CSS+DIV来布局窗体,其中作为 ...