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 ...
随机推荐
- js参数传递分析
需要明白,js基本类型存放在栈,对象存放在堆. 结论:基本类型变量作为参数,不会改变变量值.对象变量作为参数,不修改属性(访问原始对象的操作),也不会改变变量值 起因,是群里一个问题: var a = ...
- Azure Media Service
该视频来源于Build 2015, 视频比较老, 从演讲的角度看, 是个非常不错的演讲, 内容也很全面. Apr 27, 2015
- RTSP协议媒体数据发包相关的细节
最近完成了一RTSP代理网关,这是第二次开发做RTSP协议相关的开发工作了,相比11年的简单粗糙的版本,这次在底层TCP/IP通讯和RTSP协议上都有了一些新的积累,这里记录一下.基本的RTSP协议交 ...
- 第七章 LED将为我们闪烁：控制发光二极管
第七章 LED将为我们闪烁:控制发光二极管 本章我们将会看到一个完整的linux驱动程序,通过linux驱动程序控制LED的四个小灯,通俗的说就是通过向linux驱动程序来控制LED小灯的开关.用到 ...
- codeforces Expecting Trouble
link:http://codeforces.com/contest/345/problem/A 写完这道题目才发现这场比赛只能用Ada语言提交== 好吧,逗我玩呢 考的是数学期望公式,二项分布的期望 ...
- IOS 线程处理 子线程
IOS 线程处理 子线程的启动与结束 技术交流新QQ群:414971585 IOS中,如果要在主线程中启动一个子线程,可以又两种方法: [NSThread detachNewThreadSelec ...
- 多模块打包后，扫描不到@controller和@service，实现 ADD DIRECTORY ENTRIES
多模块打包后,扫描不到@controller和@service等Bean. 原因:打包时没有生成目录信息 解决办法: 1.在eclipse或者myeclipse 打包时 勾选 ADD DIRECTOR ...
- sleep和wait的区别？
sleep指线程被调用时,占着CPU不工作,形象地说明为"占着CPU睡觉",此时,系统的CPU部分资源被占用,其他线程无法进入,会增加时间限制.wait指线程处于进入等待状态,形象 ...
- UVA213 信息解码
对于lrj的想法,真是太清晰.自己真的是很难去做到.贴此代码,加以练习,加以感悟. #include<cstdio> #include<cstring> ][<<] ...
- 获取应用程序信息.h
//// 获取应用程序信息.h// IOS笔记// 一般会用来判断是否有新版本.是否需要强制更新 iOS的版本号,一个叫做Version,一个叫做Build,这两个值都可以在Xcode 中选中ta ...