css3 flex盒子布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
display: -webkit-flex;
background-color: lightgreen;
height: 100px;
}
.item{
color: #FFF;
flex: 1;
}
.first{
width: 100px;
background: red;
} /*水平垂直居中 css*/
.myoff{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background-color: royalblue;
width: 300px;
height: 300px;
}
/*水平垂直居中 flex版本*/
.parent{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="nav" style="flex-direction: row-reverse;">
<div class="first">哈哈</div>
<div class="item">adsfasdf</div>
<div class="item" style="flex: 2;">大厦法定是adsfasdf</div>
<div class="first">呵呵</div>
</div>
<!--<div class="myoff">asdf</div>-->
<div class="parent">
<div style="width: 100px;height: 100px; background: red;">aaaaaaaaaaaa</div>
</div>
</body>
</html>
css3 flex盒子布局的更多相关文章
- flex盒子布局
看过很多对于弹性盒子flex的简介,但还是觉得阮一峰大神的解析和张鑫旭大神(旧版flex)的解析比较容易理解,下面,我以自己的理解来叙述关于flex弹性布局! 1.概念(容器和项目) 在flex中,有 ...
- CSS3 box-sizing 盒子布局
在CSS中盒模型被分为两种,第一种是W3C的标准模型,第二种是IE怪异盒模型.不同之处在于后者的宽高定义的是可见元素框的尺寸,而不是元素框的内容区尺寸.目前对于浏览器大多数元素都是基于W3C标准的盒模 ...
- CSS3总结五：弹性盒子(flex)、弹性盒子布局
弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...
- css3的盒子模型布局
写在前面的话: css3盒子布局,可以更简单直观的均分页面某一个div,并且还可以达到均分后的每一个元素中的内容上下居中.左右居中,但是该模型对浏览器的版本有要求: { display: -webki ...
- CSS3 Flex Box（弹性盒子）
CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...
- css3弹性伸缩布局(一)—————flex布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...
- CSS3(5)---伸缩布局(Flex)
CSS3(5)---伸缩布局 有关页面布局之前写过三篇相关文章: 1.CSS(5)---盒子模型 2.CSS(6)---浮动(float) 3.CSS(8)---定位(position) 一.什么是F ...
- CSS3 弹性盒子(Flex Box)
1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...
- CSS3弹性伸缩布局（二）——flex布局
上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...
随机推荐
- c++ 顺序容器学习
所谓容器,就是一个装东西的盒子,在c++中,我们把装的东西叫做“元素” 而顺序容器,就是说这些东西是有顺序的,你装进去是什么顺序,它们在里面就是什么顺序. c++中的顺序容器一共有这么几种: vect ...
- emgucv文字识别
今天讲如何通过emgucv中的函数来实现文字识别.总体的过程可以分为以下几步: 1.读取要识别的图片 2.对图片进行灰度变换 3.调用emgu.cv.ocr的类tessract中的recognize方 ...
- akka各模块
Akka的模块化做得非常好,它为不同的功能提供了不同的Jar包. akka-actor-2.0.jar – 标准Actor, 有类型Actor,等等 akka-remote-2.0.jar – 远程A ...
- mysql数据库的基本操作
mysql数据库的基本操作dos命令启动mysql服务:net start mysql启动数据库: mysql -uroot -p查看所有的数据库:show databases:新建数据库:creat ...
- UVa 712 S树
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- git的使用，通过git上传修改工程
一:下载git,https://git-scm.com/downloads(若下载速度慢,可下载百度下的)接下来,默认配置,一直next 二:在github上注册账号,并新建一个项目test(英文有点 ...
- pyqt4:连接的一个带有参数的方法
一般在pyqt4中的信号连接很少连接带参数的方法,很多时候连接带参数的方法节约不少代码量. self.s5_thread=scene.Worker5() self.log_get=QtCore.QTi ...
- linux 系统性能分析
CPU篇 top 1时,看各个cpu是否均衡:看每个cpu的使用率分布是否合理 看load average的负载( 1分钟.5分钟.15分钟前到现在的平均值) 看内存的使用 看进程数运行.休眠数 M看 ...
- angularjs compile和link
原文:http://www.cnblogs.com/GoodPingGe/p/4361354.html ************************************************ ...
- tomcat7 启动项目报错 java.lang.NoSuchMethodError: javax.servlet.ServletContext.getSessionCookieConfig()
JDK版本:jdk1.8.0_77 Tomcat 版本:apache-tomcat-7.0.47 异常重现步骤: 1.完成项目部署 2.启动Tomcat 异常头部信息:java.lang.NoSuch ...