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 ...
随机推荐
- selenium win7+selenium2.0+python环境搭建
- IE10、IE11 ASP.Net 网站无法写入Cookie 问题
在做项目的时候遇上一个奇怪的问题,这个项目是用前端DWZ框架+MVC框架做的,在IE10和IE11上, 用户登录之后,操作界面中的任何操作,都无法操作,抛出异常,经过查找分析发现, 只有在IE10和I ...
- js 控制框架页面跳转 top.location.herf = "url"
top.location.href和localtion.href有什么不同 top.location.href=”url” 在顶层页面打开url(跳出框架) self.locatio ...
- 十分钟了解分布式计算:Google Dataflow
介绍 Google Cloud Dataflow是一种构建.管理和优化复杂数据处理流水线的方法,集成了许多内部技术,如用于数据高效并行化处理的Flume和具有良好容错机制流处理的MillWheel.D ...
- 两个不同的list随机组合到一个List中。
今天组长给了一个绑定任务,业务需要把一男一女随机的老师绑定到考场. 测试例子入下: package com.test; import java.util.ArrayList; import java. ...
- 动手动脑：Finally
Ø当有多个嵌套的try…catch…finally时,要特别注意finally的执行时机. Ø请先阅读 EmbedFinally.java示例,再运行它,观察其输出并进行总结. Ø特别注意: Ø当有多 ...
- 关于django xadmin的学习改造(菜单名称，更改默认前缀数据库)
路径xadmin-master\demo_app\app\models.py class c(models.Model): ip_address = models.CharField(max_leng ...
- cookie单点登录（跨域访问）
新近一家公司上来就让做oa,要求嵌入公司现有系统模块,自然而然想到模拟post单点登录对方系统新建单点登陆页面保存session,然现有系统都有用cookie保存用户信息,故保存本地cookie……测 ...
- oracle信息统计
优化器统计范围: 表统计: --行数,块数,行平均长度:all_tables:NUM_ROWS,BLOCKS,AVG_ROW_LEN:列统计: --列中唯一值的数量(NDV),NULL值的数量,数据分 ...
- Java和C++的虚函数的异同
参考博客:点我 要点:Java中的普通函数默认为虚函数,因此动态绑定的行为是默认的,而C++必须将方法声明为虚函数(virtual关键字),执行时才会进行动态绑定,详细区别可参考代码以及注释. 代码大 ...