flex 布局
<section class="main-content">
<h1>Main Content</h1>
<p><strong>I'm first in the source order.</strong></p>
<p>The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. Fry, we have a crate to deliver. Hey, guess what you're accessories to.</p>
<p>I'll get my kit! That's not soon enough! Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man.</p>
</section>
<nav class="main-nav">
<h2>Nav</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<aside class="main-sidebar">
<h2>Sidebar</h2>
<p>I am a rather effortless column of equal height.</p>
</aside>
</div>
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-content {
-webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
-ms-flex-order: 2; /* TWEENER - IE 10 */
-webkit-order: 2; /* NEW - Chrome */
order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */
width: 60%; /* No flex here, other cols take up remaining space */
-moz-box-flex: 1; /* Without this, Firefox 19- expands to widest paragraph, overrides width */
background: white;
}
.main-nav {
-webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
-ms-flex-order: 1; /* TWEENER - IE 10 */
-webkit-order: 1; /* NEW - Chrome */
order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
background: #ccc;
}
.main-sidebar {
-webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 3; /* OLD - Firefox 19- */
-ms-flex-order: 3; /* TWEENER - IE 10 */
-webkit-order: 3; /* NEW - Chrome */
order: 3; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* Firefox 19- */
width: 20%; /* For OLD syntax, otherwise collapses. */
-ms-flex: 1; /* TWEENER - IE 10 */
-webkit-flex: 1; /* NEW - Chrome */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
background: #ccc;
}
转载于:https://www.cnblogs.com/chuangweili/p/5163133.html
flex 布局相关推荐
- Flex 布局详解 - 转自阮一峰老师
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何的盒子都可以使用它. 下面我们来看一下使用 Flex 布局的容器的属性 fle ...
- Flex布局教程(来源:阮一峰)
网页布局(layout)是 CSS 的一个重点应用.Flex 布局将成为未来布局的首选方案.本文介绍它的语法,下一篇文章给出常见布局的 Flex 写法.网友 JailBreak 为本文的所有示例制作了 ...
- Flex 布局:语法篇
2019独角兽企业重金招聘Python工程师标准>>> 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性.它对于那些特殊 ...
- 通过游戏来学习CSS的Flex布局
在复习Flex 布局的时候发现的了几个有趣的小游戏,在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上,游戏默认难度为Beginner ...
- CSS布局之flex布局
最近项目中涉及到手机端开发,那么flex布局是必不可少的,这里我来重新梳理一下 1. 介绍 flex布局也被成为伸缩盒布局,在flex布局模型中,flex容器的子元素可以在x轴或y轴上进行布局,并且子 ...
- flex布局和单行省略不兼容
2019独角兽企业重金招聘Python工程师标准>>> flex布局和单行省略不兼容,存在着无法公用的特性,可以将flex修改为: display: box; display: -w ...
- flex布局的盒子模型
flex盒子模型由容器(flex container)以及容器的直接子元素(flex item)组成. 以容器(flex container)定义,有主轴(main axis)以及交叉轴(cross ...
- 浅谈CSS3中display属性的Flex布局,关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念 采用Fl ...
- CSS 7:网页布局(传统布局,flex布局,布局套路)
传统布局 一栏.两栏.三栏布局 一栏布局 特点:页面内容居中,宽度固定 实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
- 我所知道的flex布局 —— 上篇
前言 你还在用display+position+float来进行css布局吗?有没有觉得用传统的这种布局方法来实现特殊布局特别麻烦困难,例如:垂直居中.今天来记录一下自己对flex布局的了解(虽然不算 ...
最新文章
- Kfold交叉验证心得
- 因式分解,算术基本定理,积性函数(POJ 1452 Happy2004)
- 【VC基础】 6、VC条件定价
- redis的五种数据结构及其使用场景
- spring处理循环依赖时序图_Maven依赖管理系统
- 在ASP.NET 3.5中使用新的ListView控件(5)
- BAT-使用BAT方法清理Delphi临时文件
- Docker 概念-1
- Python通过IMAP实现邮箱客户端
- 微信第一个支持小程序版本号与服务器不符,微信功能又又又更新!第一个就让人不淡定…...
- 罗技K375s重新配置和连接
- 微信小程序,引入WeUI组件库 扩展组件库
- 五款免费的磁盘空间使用情况报告软件
- jsp中去掉超链接下划线吗,在JSP中,若要在JSP正确使用标签:
,在jsp中声称的taglib指令为:
下划线处应该是() 答案:x...
- BZOJ4398: 福慧双修【二进制分组+最短路】
- 计算机培训结业典礼主持词,培训结业典礼主持词范例珍藏版(备份存档)
- STM32F4关键寄存器总结
- html5与cs6,【CS6新功能介绍】EPUB 和 HTML5
- 织梦CMS仿某中国作文网源码 范文论文网模板 带会员系统+支付接口+整站数据
- 面试JAVA常被问到的问题(持续更新中)