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 ...
随机推荐
- 学习java的第二天
Java第二天 标识符 标识符开头只能以字母和_开头 严格区分大小写 不能以关键词命名 变量 变量是什么:就是可以变化的量 Java是一种强类型语言,定义变量必须声明后才能使用 Java变量是程序中最 ...
- 微信支付 V3 的 Java 实现 Payment Spring Boot-1.0.7.RELEASE 发布
Payment Spring Boot 是微信支付V3的Java实现,仅仅依赖Spring内置的一些类库.配置简单方便,可以让开发者快速为Spring Boot应用接入微信支付. 功能特性 实现微信支 ...
- 简述Python垃圾回收机制和常量池的验证
目录 通过代码验证python解释器内部使用了常量池 Python的引入 变量的引入 为什么要有变量 定义变量 常量引入 常量池引入 Python解释器 Python变量存储机制 Python垃圾回收 ...
- 通达OA 任意文件上传-2013/2015版本
参考 http://wiki.0-sec.org/0day/%E9%80%9A%E8%BE%BEoa/11.html 影响版本 2013版本 2015版本 漏洞文件 general/vmeet/wbU ...
- Apache配置 6. 访问日记切割
日志一直记录总有一天会把整个磁盘占满,所以有必要让它自动切割,并删除老的日志文件 (1)配置 (1)配置 # vim /usr/local/apache2 .4/conf/extra/httpd-vh ...
- 关于深度学习配置的一些tips
建立博客的第一天,将以前记录的一些东西存档下,方便查看. 1安装anaconda 2pycharm破解 配置环境变量3虚拟环境推荐是python3.5或3.6版本 4.安装numpy tensorfl ...
- android分析之mutex
Android的锁是对Linux锁的一种包装: // ------------------------------------------------------------------------- ...
- POJ2635(数论+欧拉筛+大数除法)
题目链接:https://vjudge.net/problem/POJ-2635 题意:给定一个由两个质数积的大数M和一个数L,问大数M的其中较小的质数是否小于L. 题解:因为大数M已经超过long ...
- 攻防世界 reverse leaked-license-64
mark一下,以后分析 原文:http://sibears.ru/labs/ASIS-CTF-Quals-2016-Leaked_License/ [ASIS CTF Quals 2016] - 泄露 ...
- RepVGG
RepVGG: Making VGG-style ConvNets Great Again 作者:elfin 资料来源:RepVGG论文解析 目录 1.摘要 2.背景介绍 3.相关工作 3.1 单 ...