Flex 布局教程:语法篇
- 上一篇:ES6 的功能侦测库
- 下一篇:Flex 布局教程:实
分类:
- 开发者手册
Flex 布局教程:语法篇
作者: 阮一峰
日期: 2015年7月10日
网页布局(layout)是CSS的一个重点应用。
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
Flex布局将成为未来布局的首选方案。本文介绍它的语法,下一篇文章给出常见布局的Flex写法。
以下内容主要参考了下面两篇文章:A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。
一、Flex布局是什么?
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{display: flex; }
行内元素也可以使用Flex布局。
.box{display: inline-flex; }
Webkit内核的浏览器,必须加上-webkit
前缀。
.box{display: -webkit-flex; /* Safari */display: flex; }
注意,设为Flex布局以后,子元素的float
、clear
和vertical-align
属性将失效。
二、基本概念
采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size
,占据的交叉轴空间叫做cross size
。
三、容器的属性
以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction属性
flex-direction
属性决定主轴的方向(即项目的排列方向)。
.box {flex-direction: row | row-reverse | column | column-reverse; }
它可能有4个值。
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿。
3.2 flex-wrap属性
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap
属性定义,如果一条轴线排不下,如何换行。
.box{flex-wrap: nowrap | wrap | wrap-reverse; }
它可能取三个值。
(1)nowrap
(默认):不换行。
(2)wrap
:换行,第一行在上方。
(3)wrap-reverse
:换行,第一行在下方。
3.3 flex-flow
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。
.box {flex-flow: <flex-direction> || <flex-wrap>; }
3.4 justify-content属性
justify-content
属性定义了项目在主轴上的对齐方式。
.box {justify-content: flex-start | flex-end | center | space-between | space-around; }
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等。space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
3.5 align-items属性
align-items
属性定义项目在交叉轴上如何对齐。
.box {align-items: flex-start | flex-end | center | baseline | stretch; }
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
3.6 align-content属性
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
该属性可能取6个值。
flex-start
:与交叉轴的起点对齐。flex-end
:与交叉轴的终点对齐。center
:与交叉轴的中点对齐。space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch
(默认值):轴线占满整个交叉轴。
四、项目的属性
以下6个属性设置在项目上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self
4.1 order属性
order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.item {order: <integer>; }
4.2 flex-grow属性
flex-grow
属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。
.item {flex-grow: <number>; /* default 0 */ }
如果所有项目的flex-grow
属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
4.3 flex-shrink属性
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item {flex-shrink: <number>; /* default 1 */ }
如果所有项目的flex-shrink
属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
4.4 flex-basis属性
flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即项目的本来大小。
.item {flex-basis: <length> | auto; /* default auto */ }
它可以设为跟width
或height
属性一样的值(比如350px),则项目将占据固定空间。
4.5 flex属性
flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
4.6 align-self属性
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch; }
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
(完)
文档信息
- 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
- 发表日期: 2015年7月10日
- 更多内容: 档案 » 开发者手册
- 购买文集: 《如何变得有思想》
- 社交媒体: twitter, weibo
- Feed订阅:
相关文章
- 2016.10.18: 中文技术文档的写作规范
很多人说,不知道怎么写文档,都是凭着感觉写。
- 2016.09.13: Content Security Policy 入门教程
跨域脚本攻击 XSS 是最常见、危害最大的网页安全漏洞。
- 2016.09.10: 亚马逊如何变成 SOA(面向服务的架构)?
上一篇文章,我摘录了《程序员的呐喊》。这本书有趣的内容太多,今天再摘录一段。
- 2016.09.08: 程序员小测试:保守派 vs 自由派
最近,我在阅读 Steve Yegg 的文集《程序员的呐喊》。
广告(购买广告位)
留言(98条)
imskull 说:
多谢,很不错的文章,一直都用Polymer预定义的flex排版("layout horizontal center"这样),看完才知道原来flex还有其它这些功能。
2015年7月11日 23:50 | # | 引用
大个 说:
阮大神啊,flex-basis,这个属性的作用是优先级高于width的width吗?它除了设置宽度的作用还有什么用处?(宽度指的是水平方向,如果是垂直方向就是height了)。
2015年7月20日 16:56 | # | 引用
longfei 说:
阮老师,那个item的flex-grow属性,我写了个demo
CSS:
body{margin:0;}
ul,li{margin:0; padding:0;}
li{list-style-type:none;}
#list{border:2px solid gold; height:500px; display:flex; flex-direction:row;}
#list li{font-family:"microsoft yahei"; font-size:50px; background:#C00; color:#fff; margin:2px; flex-grow:1;}
#list li:nth-child(2){flex-grow:2;}
<ul id="list">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
结果第2个li所占的宽度并不是其它li的2倍,为什么呢?比其它两个要大,但不足2倍。
2015年7月22日 11:50 | # | 引用
coffce 说:
Nice!看了这篇文后我写了个基于flex的栅格布局库 flex-layout
https://github.com/Coffcer/flex-layout
2015年8月17日 09:49 | # | 引用
广州哈哥 说:
阮老师,您好,我是0基础开始学习flex,今天看了你的这篇博文,发现有个地方好像你给弄反了。就是justify-content和align-items这两个属性。我试过了,其实,前者是设置项目在交叉轴上的对齐方式的,而后者是设置项目在主轴上的对齐方式的。
2015年9月23日 22:10 | # | 引用
六翼 说:
引用阮一峰的发言:@longfei:
flex-basis都设为0,因为flex-grow定义的是,剩余空间分配的比例关系。
那请问不设为0的时候它是多少呢?看您的原文里是“auto”,但这个auto是怎么计算的?
2015年9月24日 09:58 | # | 引用
年华果腹 说:
想学习flex的相关知识,找了几篇文章大概看了一下,觉得都不满意,突然在google上发现文章后面带有阮老师标识的文章,于是默默把其他的几篇文章的tab都关了
2015年10月30日 13:20 | # | 引用
phc 说:
引用广州哈哥的发言:阮老师,您好,我是0基础开始学习flex,今天看了你的这篇博文,发现有个地方好像你给弄反了。就是justify-content和align-items这两个属性。我试过了,其实,前者是设置项目在交叉轴上的对齐方式的,而后者是设置项目在主轴上的对齐方式的。
我不知道自己理解的对不对,但是我觉得主轴的话也就是项目的排布方向,加入是水平排布,那么交叉轴即是垂直方向的,设置align-items:stretch;的话确实是在垂直方向上拉伸的,那align-itmes就是设置交叉轴的吧
2015年11月 5日 17:34 | # | 引用
ppYoung 说:
原来是css-tricks上的文章翻译过来的,为什么不做说明
传送门:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
2015年12月22日 11:37 | # | 引用
wcg 说:
@mixin flex(){
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
body{
@include flex();
flex: 1;
justify-content: center;
align-items: center;
flex-direction: column;
}
#main{
@include flex();
height: 400px;
width: 1200px;
background-color: red;
}
div #main 并不会居中
2015年12月31日 15:42 | # | 引用
wing-kai 说:
引用lomin的发言:想问一下,微信的内置浏览器是不是不支持这个属性啊。。我写了一个。在电脑上用chrome浏览器有用。在微信上没用了
微信的话用display: box
2016年1月 9日 13:01 | # | 引用
Silvers · Rayleigh 说:
引用longfei的发言:阮老师,那个item的flex-grow属性,我写了个demo
CSS:
body{margin:0;}
ul,li{margin:0; padding:0;}
li{list-style-type:none;}
#list{border:2px solid gold; height:500px; display:flex; flex-direction:row;}
#list li{font-family:"microsoft yahei"; font-size:50px; background:#C00; color:#fff; margin:2px; flex-grow:1;}
#list li:nth-child(2){flex-grow:2;}<ul id="list">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
结果第2个li所占的宽度并不是其它li的2倍,为什么呢?比其它两个要大,但不足2倍。
这里是你理解错了,3个 li 平分下来每个是1/3。
你想实现的2个相等,1个宽度是其他2个的两倍实际上就是4个 li 平分,其中2个合并成1个,所以每个 li 是1/4,也就是#list li:nth-child(2){flex-grow:3;}
2016年1月30日 16:28 | # | 引用
Silvers · Rayleigh 说:
引用巫婆的发言:我每次写项目的时候也考虑过用flex布局,但是有的手机上显示不谦容。我到现在都不知道该怎么解决。
不兼容可以用 display:box 试试看
2016年1月30日 16:29 | # | 引用
村小闹 说:
引用广州哈哥的发言:阮老师,您好,我是0基础开始学习flex,今天看了你的这篇博文,发现有个地方好像你给弄反了。就是justify-content和align-items这两个属性。我试过了,其实,前者是设置项目在交叉轴上的对齐方式的,而后者是设置项目在主轴上的对齐方式的。
是你自己弄错了好吧~
2016年2月 1日 15:29 | # | 引用
cc 说:
引用cc的发言:flex-wrap: wrap;
在微信内置浏览器中无效!
autoprefixer({browsers: ['last 10 version']})
这样都无效!
2016年3月19日 12:26 | # | 引用
cc 说:
引用cc的发言:autoprefixer({browsers: ['last 10 version']})
这样都无效!
换个写法吧,历史的倒退!shit!
2016年3月19日 12:27 | # | 引用
麦当真 说:
一峰老师,我简直不能更加感激您,也非常崇拜您。哇唔,我猜您已经将技术看作是艺术了吧!!!现在好多程序员生活都比较枯燥(我猜他们和我一样,嘻嘻)(每天都很忙,技术更新快,提升自己的技术还要完成项目),灵魂也很干涸(因为很忙,所以太少的时间感受生活,去吸取技术之外的东西来滋养我们的灵魂)。然而每次看您的博文,我就感觉自己经历了一场与艺术的邂逅,不仅学习了知识,还让我得以短暂的放松,让我的心灵经历了一次奇妙的旅行,然后再元气满满,整装继续上路。非常感谢您的分享,您无私的指引,以及心灵的关怀。
2016年4月14日 11:14 | # | 引用
MZ 说:
引用阮一峰的发言:@longfei:
flex-basis都设为0,因为flex-grow定义的是,剩余空间分配的比例关系。
flex-basis设为0,那项目的初始大小是多大?
2016年4月27日 20:21 | # | 引用
林明哲 说:
图片很好!点赞。flex在安卓原生开发上也有了支持库。https://github.com/google/flexbox-layout
2016年5月16日 16:55 | # | 引用
react-native-android 说:
flex-direction这个属性的默认值是row吗?这样的话是不是默认情况下,item就是横向排列了。但是。我在做的过程中发现,如果不写flex-direction属性的话,item是竖向排列的
2016年5月26日 10:46 | # | 引用
石海伟 说:
引用longfei的发言:阮老师,那个item的flex-grow属性,我写了个demo
CSS:
body{margin:0;}
ul,li{margin:0; padding:0;}
li{list-style-type:none;}
#list{border:2px solid gold; height:500px; display:flex; flex-direction:row;}
#list li{font-family:"microsoft yahei"; font-size:50px; background:#C00; color:#fff; margin:2px; flex-grow:1;}
#list li:nth-child(2){flex-grow:2;}<ul id="list">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
结果第2个li所占的宽度并不是其它li的2倍,为什么呢?比其它两个要大,但不足2倍。
好像是按多余空间算的
2016年6月28日 15:57 | # | 引用
卓 说:
引用石海伟的发言:好像是按多余空间算的
一共有三个li元素,flex-grow:2即当前元素宽度为 父元素的2/3 并不是其他元素的两倍
2016年6月29日 16:08 | # | 引用
卓 说:
引用longfei的发言:阮老师,那个item的flex-grow属性,我写了个demo
CSS:
body{margin:0;}
ul,li{margin:0; padding:0;}
li{list-style-type:none;}
#list{border:2px solid gold; height:500px; display:flex; flex-direction:row;}
#list li{font-family:"microsoft yahei"; font-size:50px; background:#C00; color:#fff; margin:2px; flex-grow:1;}
#list li:nth-child(2){flex-grow:2;}<ul id="list">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
结果第2个li所占的宽度并不是其它li的2倍,为什么呢?比其它两个要大,但不足2倍。
一共有三个li元素,flex-grow:2即当前元素宽度为 父元素的2/3 并不是其他元素的两倍
2016年6月29日 16:09 | # | 引用
卓 说:
请问: 针对此属性 justify-content: space-between 3个元素为一行排列,最后多余的两个多余的元素如何让它靠左排布,事实上是左右排布了,表面看就是中间空了个元素,请看demo
1 2 3 4 5
.container {width: 400px;display: flex;justify-content: space-between;flex-flow: row wrap;
}
span {width: 110px;background-color: #f60;border-radius: 5px;margin-top: 10px;padding: 10px;
}
2016年7月 5日 10:47 | # | 引用
卓 说:
引用卓的发言:请问: 针对此属性 justify-content: space-between 3个元素为一行排列,最后多余的两个多余的元素如何让它靠左排布,事实上是左右排布了,表面看就是中间空了个元素,请看demo
1
2
3
4
5.container {width: 400px;display: flex;justify-content: space-between;flex-flow: row wrap;
}span {width: 110px;background-color: #f60;border-radius: 5px;margin-top: 10px;padding: 10px;
}
2016年7月 5日 10:49 | # | 引用
Yac 说:
目前发现一个问题,和@卓貌似是一个问题:
父元素:justify-content: space-between
在每排3个元素一共5个元素情况下,第五个元素怎么实现居中?
现在的效果是第1、2、3元素正常,4元素居左,5元素居右
2016年7月10日 03:19 | # | 引用
liangwang 说:
问下,支付宝是否已经有页面部署了flex的布局? 似乎各大浏览器,除了chrome支持的都不是特别好,比如IE8就,FireFox46之前的,Safari9.1之前的都不支持
2016年7月14日 10:46 | # | 引用
孟泰德 说:
引用liangwang的发言:"Webkit内核的浏览器,必须加上-webkit前缀。“, 我测试了下safari和chrome,都不需要的。
在ios8及以下的版本中就需要了
2016年7月19日 13:12 | # | 引用
zhishaofei3 说:
引用Silvers · Rayleigh的发言:这里是你理解错了,3个 li 平分下来每个是1/3。
你想实现的2个相等,1个宽度是其他2个的两倍实际上就是4个 li 平分,其中2个合并成1个,所以每个 li 是1/4,也就是#list li:nth-child(2){flex-grow:3;}
3也不行吧?
2016年8月 5日 13:11 | # | 引用
zhishaofei3 说:
引用longfei的发言:阮老师,那个item的flex-grow属性,我写了个demo
CSS:
body{margin:0;}
ul,li{margin:0; padding:0;}
li{list-style-type:none;}
#list{border:2px solid gold; height:500px; display:flex; flex-direction:row;}
#list li{font-family:"microsoft yahei"; font-size:50px; background:#C00; color:#fff; margin:2px; flex-grow:1;}
#list li:nth-child(2){flex-grow:2;}<ul id="list">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
结果第2个li所占的宽度并不是其它li的2倍,为什么呢?比其它两个要大,但不足2倍。
是按剩余空间算的,因为你里面有文字,所以刨去了文字宽度,你去掉文字就好了
2016年8月 5日 14:08 | # | 引用
zousjun 说:
引用zhishaofei3的发言:是按剩余空间算的,因为你里面有文字,所以刨去了文字宽度,你去掉文字就好了
这里是必须先除去每个元素实际占有的大小之后,然后按照你设置的比例来分配空间,h
还有默认空间应该是flex-grow: 1,而不是flex-grow: 0;
<ul id="list"><li>test1</li><li>test2</li><li>test3</li> </ul>
body{margin:0;}ul,li{ margin:0; padding:0;}li{ list-style-type:none;}#list{ border:2px solid gold; height:500px; display:flex; flex-direction:row;}#list li {width: 120px;}#list li{font-family:"microsoft yahei"; font-size:50px; background:#C00; color:#fff; margin:2px; flex-grow:1;}#list li:nth-child(2){flex-grow:2;}#list li:nth-child(3){flex-grow: 0;}
你可以比较一下两段代码的不同
2016年8月17日 18:27 | # | 引用
felbry 说:
今天实践过程中发现了一个理解误区,就是刚开始把justify-content误认为是指定水平对齐方式(其实针对的是主轴),而align-items是指定垂直对齐方式。而指定主轴需要用到flex-direction(默认为水平)。不过后来想想,假使指定主轴为竖直的话,那主轴和交叉轴是不是就是一样了?还有那个align-content说的是针对多根轴线,是不是就意味着如果主轴指定为column,就是主轴和交叉轴一样是一根线了,如果主轴为默认,那么当主轴和交叉轴的对齐方式一样的话,直接用一个align-content属性就ok了?
2016年9月14日 15:44 | # | 引用
家兴 说:
flex-direction: row | row-reverse | column | column-reverse;
这部分的描述和下面的配图,容易误导一些新手哈
可能会造成 row = 下图第一个 依次的顺序
2016年10月10日 11:11 | # | 引用
cnwhy 说:
在我测试中有这样的感觉,还请指正
1.当主轴设置的是水平方向时(row,row-reverse)方向还和容器的dir属有关;
flex-direction 的方向是相对dir设置的方向来设置的.
2.交叉轴的方向(默认和主轴换行的方向一至),flex-wrap: wrap-reverse; 会改变交叉轴的方向
demo: http://sandbox.runjs.cn/show/zkqimsj5
2016年11月 1日 18:17 | # | 引用
良心的荒野开拓者 说:
引用phc的发言:我不知道自己理解的对不对,但是我觉得主轴的话也就是项目的排布方向,加入是水平排布,那么交叉轴即是垂直方向的,设置align-items:stretch;的话确实是在垂直方向上拉伸的,那align-itmes就是设置交叉轴的吧
2016年11月11日 14:37 | # | 引用
LeoHsia 说:
真的非常感谢!解决了从入行以来一直面临的垂直居中的大问题,在很多应用场景中可以实现。虽然负面性还有待发掘,真的是非常感谢博主!!!
2016年12月 5日 22:45 | # | 引用
dfb 说:
我有个等高布局不懂,就是左边有一张1000多px高的图片,右边为文字区域。
怎么让其当右边文字区域的高度小于浏览器高度时,左边的图片高度为浏览器高度,
当右边文字区域的高度大于浏览器高度时,则左边的图片的高度为右边文字区域的高度?
要求是:不用js控制,还有不能把左边的图片当背景图来使用
2016年12月23日 09:51 | # | 引用
flowplay 说:
flex-grow, flex-shrink,flex-basis可能不好理解,补充下,这里指的空间是主轴空间,是水平的还是垂直的,依flex-direction而定
2016年12月26日 21:47 | # | 引用
vinceok 说:
引用zhishaofei3的发言:是按剩余空间算的,因为你里面有文字,所以刨去了文字宽度,你去掉文字就好了
引用Silvers · Rayleigh的发言:这里是你理解错了,3个 li 平分下来每个是1/3。
你想实现的2个相等,1个宽度是其他2个的两倍实际上就是4个 li 平分,其中2个合并成1个,所以每个 li 是1/4,也就是#list li:nth-child(2){flex-grow:3;}
你说的很对,博主没有说清楚
2017年1月 6日 10:40 | # | 引用
我要发表看法
您的留言 (HTML标签部分可用)
您的大名:
«-必填
电子邮件:
«-必填,不公开
个人网址:
«-我信任你,不会填写广告链接
记住个人信息?
«- 点击按钮
联系方式 | ruanyifeng.com 2003 - 2017
Flex 布局教程:语法篇相关推荐
- Flex 布局:语法篇
2019独角兽企业重金招聘Python工程师标准>>> 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性.它对于那些特殊 ...
- Grid网格布局教程-语法篇
一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
- Flex 布局教程:语法篇(阮一峰)
阿里云 > 教程中心 > html教程 > Flex 布局教程:语法篇(阮一峰) Flex 布局教程:语法篇(阮一峰) 发布时间:2018-03-12 来源:网络 上传 ...
- Flex 布局教程:实例篇
上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇&g ...
- [转]详解Flex布局(语法+教程)
Flex 布局教程:语法篇 作者: 阮一峰 原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是 CSS ...
- css基础精华---Flex 布局教程:实例篇
转载地址:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html http://www.ruanyifeng.com/blog/2015/0 ...
- Flex布局教程(非常受用)
目录 前言: 一.语法篇 1.概述 2.Flex 布局怎么用 任何一个容器都可以指定为 Flex 布局 行内元素也可以使用 Flex 布局: Webkit 内核的浏览器,必须加上-webkit前缀: ...
- HTML Flex布局教程
Flex 布局教程:语法篇 bShare.addEntry({ title: document.getElementById("page-title").innerHTML, ur ...
- Flex 布局教程——阮老师
超级实用的css布局???赶紧学习来 一.Flex 布局教程:语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 二.Flex 布 ...
最新文章
- 集成学习算法总结----Boosting和Bagging
- Spring Remoting: Burlap--转
- 原型模式、模板方法、迪米特法则、外观模式
- 解析第一高中教育首份成绩单:营利双增,轻资产模式成“杀手锏”
- Linux笔记-nohup和
- openCV实现多人脸检测,多眼部检测,完整代码和详细注释
- 统信UOS个人版安装与激活教程2020.5.17
- LSUN数据集读取和解压,mdb格式转换为jpg格式(保姆教程)
- 清除系统垃圾脚本 windows
- 一般线性模型(general linear model,GLM)
- fedora20 安装nvidia独立显卡驱动
- JavaScript通过extend和super实现继承
- 消防应急疏散指示系统如何在工业厂房项目上应用
- 证明:串联谐振回路中电容与电感两端电压的模值相等,且等于外加电压的Q倍
- 国产最强?室友用了直呼牛逼
- 基于Adams联合MATLAB的联合仿真设置
- 27家中美名校借阅榜对比公开:差别太大了
- 篮球比赛计时计分系统
- .yml文件的基本用法
- AI人脸自动签到识别系统使用教程
热门文章
- 【论文简述及翻译】Learning for Disparity Estimation through Feature Constancy(CVPR 2018)
- Spring--官方文档部分翻译(第一章)
- Boss直聘怎么写出优秀的简历?
- js中blob转string、string转blob、typeArray转blob、blob转TypeArray
- 2884: 水果分级
- docker中vim无法粘贴
- Vue Element-ui el-input无法粘贴问题
- 关于“Connection refused: connect”错误
- 关键链项目管理方法的缓冲区管理
- iOS 获取当前的UIViewController