文档章节

CSS之flex

t
 tommwq
发布于 2016/02/22 22:40
字数 955
阅读 46
收藏 1

CSS之flex

1 flex基础

flex用于为容器内的子元素设置布局。当一个元素的display属性设置为flex或inline-flex时,这个元素成为flex容器,其子元素成为flex元素。为flex元素设置布局非常便捷。但要注意的是,flex元素的float、clear和vertical-align属性不再起作用。
 
2 flex容器

为了便于布局子元素,flex容器提供了两个轴用于对齐,分别称为主轴和交叉轴。主轴由flex-direction定义。flex-direction有4个可选值:row(默认值)、row-reverse、column、column-reverse,对应的主轴方向依次为水平向右(起点在左)、水平向左(起点在右)、垂直向下(起点在上)、垂直向上(起点在下)。在主轴方向上,子元素的布局方式由justify-content定义。justify-content有5个可选值:flex-start(默认值)、flex-end、center、space-between、space-around。其中flex-start表示首个子元素紧邻主轴起点排列。flex-end表示最后一个子元素紧邻主轴终点排列。center表示居中排列。space-between表示子元素两端对其,各子元素间间隔距离相等。space-around表示各子元素两边的间隔距离(或子元素和父元素边框的间隔距离)相等。

如果父元素的宽度无法容纳全部子元素,可以使用flex-wrap指定换行方式。flex-wrap可以取值nowrap(默认值)、wrap或wrap-reverse。nowrap表示不换行,因此多出的子元素不会显示。wrap表示换行,第一行在上方。wrap-reverse表示换行,第一行在下方。

和主轴垂直的直线是交叉轴。子元素在交叉轴上的对齐方式由align-items规定。align-items可以是flex-start(默认值)、flex-end、center、baseline和stretch。flex-start、flex-end、center这3个值的意义和在justify-content中类似。baseline表示按照子元素的首行文字基线对其。stretch表示在资源素没有设置高度时,将子元素高度拉伸至充满父元素。

当主轴方向上发生换行时,在交叉轴方向上会产生多行子元素。这些行之间的排序方式,由align-content规定。align-content的可选值有flex-start(默认值)、flex-end、center、space-between、space-around、stretch。这些值的意义,同之前描述的类似。

除了上述的5个属性,CSS为flex容器提供了缩写flex-flow,语法为flex: <flex-direction> || <flex-wrap>。

3 flex元素

flex容器规定了全部子元素的布局方式。如果某个子元素需要单独的布局方式,也可以使用flex属性。子元素可以使用的flex属性有order、align-self、flex-grow、flex-shrink、flex-basis,以及缩写flex。在主轴方向上,可以使用order调整元素位置。order(默认值为0)越小的元素越靠近主轴起点。在交叉轴方向上,可以使用align-self覆盖容器的align-items属性。align-self的可选值同容器的align-items属性一样。

如果容器在主轴方向上有剩余空间,可以通过flex-grow属性设定子元素的放大比例。当flex-grow为0时,子元素不会放大。类似的,可以通过flex-shrink为子元素设置缩小比例。和这两个属性相关的还有flex-basis。在计算主轴方向上是否有剩余空间时,子元素的flex-basis值被认为是子元素占用的大小。flex-basis默认值是auto,表示子元素的宽度或高度(根据主轴方向决定)。
   

CSS为flex元素提供了缩写flex,语法是flex: none || <flex-grow> || <flex-shrink> || <flex-basis>。

4 兼容性

对于webkit内核的容器,需要为flex增加-webkit-前缀。

5 参考资料

《Flex布局教程:语法篇》 阮一飞 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
《Flex布局教程:实例篇》 阮一飞 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

 

 

© 著作权归作者所有

t

tommwq

粉丝 2
博文 24
码字总数 19636
作品 0
广州
私信 提问
进一步了解flex布局—来实现这些常见布局吧

  flex布局具有便捷、灵活的特点,熟练的运用flex布局能解决大部分布局问题,这里对一些常用布局场景做一些总结。 web页面布局(topbar + main + footbar) 示例代码   要实现的效果如下:...

LT_bear
2018/05/29
0
0
CSS3.0盒模型display: box;详解

box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到f...

黯灭
2013/12/09
0
0
ReactNative Flex 布局

起源 2009年,W3C 提出了一种新的方案----Flex 布局,Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。目前,它已经得到了所有浏览器的支持,这意味着,现在...

Inlight先森
2018/07/03
0
0
[知其所以然]探究Flex盒子的‘’弹性‘’

背景 我们使用Flexbox 实现垂直水平居中、自适应容器宽度乐此不疲,因为确确实实很方便。可以简便、完整、响应式地实现各种页面布局,目前已得到所有现代浏览器的支持。但Flex属性如何计算呢...

快狗打车前端团队
05/23
0
0
css3最全flex布局结构整理

一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左...

韦姣敏
2018/05/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

巨杉Tech | 使用 SequoiaDB + Docker + Nodejs 搭建 Web 服务器

容器化技术的出现大大简化了应用开发人员在构建底层基础设施的工作。SequoiaDB 巨杉数据库于3.2.1版本正式推出了 Docker 容器化部署方案,本文将会基于 SequoiaDB 巨杉数据库与Nodejs的 Dock...

巨杉数据库
16分钟前
2
0
文库免费下载?vip视频免费看?查询网页快照?这一切只需要三个字符

发现了一个神奇的技巧,只需要在地址栏输入:3串神器的字符(两三个字母),就会有神奇的事情发生! 01:“vvv”,文库免费下载 大家可以在龙喵网:软件资源导航 里面“在线工具-文库资料下载...

元歌
26分钟前
5
1
远程拷贝命令scp

命令scp 用途: secure copy,利用ssl安全复制(远程文件复制程序) 语法: ]# scp [选项] [用户名@ip]源文件 [用户@ip]目标文件 选项: -P port 指定远程主机的ssh端口 ...

迷失De挣扎
今天
4
0
总结使用tslint的一些代码规范

1.冒号后面,逗号后面要有空格,还有一般if语句大括号前面后面也都要有空格 2.使用for (let i = 0; i < arr.length; i++) {}循环数组报错,使用for (const i of arr) {} for (const i of arr...

大换子
今天
2
0
虚函数

虚函数作用: 基类中可以调用继承类中的函数。(相当于就是允许子类覆盖父类中的函数)

colin_86
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部