CSS3 Flexbox可视化指南
0. 目录
1. 引言
原文:scotch.io的A Visual Guide to CSS3 Flexbox Properties
译者:前端开发whqet,意译为主不当之处,欢迎指正!
译言:希望可以通过可视化的方式帮助您了解Flexbox属性如何影响flex布局。大家可以到原文demo那里先一睹为快,注意,需翻墙浏览(因为原文调用google api插件),我们提供了另外的在线实验平台,或者你也可以到github关注、下载。
2. 正文
2.1 引入
Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布局模块,用于实现容器里项目的对齐、方向、排序(即使在项目大小位置、动态生成的情况)。flex容器最大的特性在于,能够修改子元素的宽度和高度,以满足在不同尺寸屏幕下的如意分布。
许多设计人员、开发人员发现flexbox布局方式使用简单,定位元素更加简单、复杂的布局更容易用较少的代码实现,大大地简化了开发流程。不像块状布局、内联布局那样基于竖直方向、水平方向,flexbox的布局算法基于方向。flexbox布局适用于小的应用组件、新的CSS Grid布局模块更适用于大量的布局。
本指南不解释flex属性如何工作,我们只是用可视化的方式展示flex属性如何影响布局。
2.2 基础
在具体描述flex属性之前,我们先来简要介绍下flexbox模型。flex布局由父容器(我们叫做flex container)和它的子元素(我们叫做flex items)组成。
在上图所示的盒子里,你可以看到用来描述flex container和flex items的属性和术语,如果你想了解详细信息,请访问W3C的flexbox model官方文档.
flexbox自2009的初次草案开始,已经经历了几次更新和语法修改,为了避免困惑、保证清晰,我们仅仅使用2014年9月最后一次工作草案中的语法。如果您想要实现旧浏览器的兼容,请访问这篇文章寻找最佳实践。
最近的flexbox规范浏览器支持情况如下:
- Chrome 29+
- Firefox 28+
- Internet Explorer 11+
- Opera 17+
- Safari 6.1+ (prefixed with -webkit-)
- Android 4.4+
- iOS 7.1+ (prefixed with -webkit-)
您也可以到caniuse了解浏览器兼容情况详情。
本文中的用到的一些术语的表达约定如下
- flex-container-弹性容器
- flex-item-弹性子元素
- main axis-主轴
- cross axis-侧轴
2.3 使用
使用flexbox只需要在父元素上设置display属性即可。
.flex-container {
display: -webkit-flex; /* Safari */
display: flex;
}
- 1
- 2
- 3
- 4
如果您想让它以内联方式显示,则
.flex-container {
display: -webkit-inline-flex; /* Safari */
display: inline-flex;
}
- 1
- 2
- 3
- 4
注意:仅仅需要在父元素上设置这一个属性即可,它的子元素会自动变成flex items。
有很多方式分组flexbox的所有属性,我发现最容易理解的方式是分成两组,一组为弹性容器的属性,另一组为弹性子元素的属性,接下来我们按这种方式来一一解析。
2.4 弹性容器(Flex container)属性
2.4.1 flex-direction
该属性通过设置flex container主坐标轴方向影响子元素(flex item)如何在容器中排布。我们可以设置两个主要的方向水平和垂直方向。
可以接受的值有四个row、row-reverse、column、column-reverse,如下所示。
.flex-container {
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
}
- 1
- 2
- 3
- 4
弹性子元素将会按照自左向右的水平排列。
.flex-container {
-webkit-flex-direction: row-reverse; /* Safari */
flex-direction: row-reverse;
}
- 1
- 2
- 3
- 4
弹性子元素将会自右向左水平排列。
.flex-container {
-webkit-flex-direction: column; /* Safari */
flex-direction: column;
}
- 1
- 2
- 3
- 4
弹性子元素将自上而下竖直排列
.flex-container {
-webkit-flex-direction: column-reverse; /* Safari */
flex-direction: column-reverse;
}
- 1
- 2
- 3
- 4
弹性子元素将自下而上竖直排列
默认值为row
.
注意,row和row-reverse是基于书写顺序的,所以在rtl
环境下将会反置。
2.4.2 flex-wrap
flexbox最初的理念是保持弹性容器的子元素在一行中。flex-wrap
属性控制当子元素items超出弹性容器范围是是否换行,以及新行的方向。
本属性可以接受一下几个值:no-wrap、wrap、wrap-reverse,分别如下所示。
.flex-container {
-webkit-flex-wrap: nowrap; /* Safari */
flex-wrap: nowrap;
}
- 1
- 2
- 3
- 4
弹性子元素将会在一行显示,默认的子元素items将会缩减以适应弹性容器的宽度。
.flex-container {
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
}
- 1
- 2
- 3
- 4
如果需要的话,弹性子元素将会自左向右、自上而下地多行显示。
.flex-container {
-webkit-flex-wrap: wrap-reverse; /* Safari */
flex-wrap: wrap-reverse;
}
- 1
- 2
- 3
- 4
如果需要的话,弹性子元素将会自左向右、自下而上地多行显示。
默认值为no-wrap
.
注意,这些属性也是基于书写顺序的,所以在rtl
环境下将会反置。
2.4.3 flex-flow
flex-flow
属性是flex-direction
和flex-wrap
属性的快捷方式,复合属性。
.flex-container {
-webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
flex-flow: <flex-direction> || <flex-wrap>;
}
- 1
- 2
- 3
- 4
默认值为row nowrap
.
2.4.4 justify-content
justify-content
设置弹性子元素在弹性容器中当前行主坐标的对齐方式,当弹性容器里一行上的所有子元素都不能伸缩或已经达到其最大值时,该属性可协助对多余的空间进行分配。
可以接受的值为flex-start、flex-end、center、space-between、space-around等五个值,默认值为flex-start
。详细如下所示。
.flex-container {
-webkit-justify-content: flex-start; /* Safari */
justify-content: flex-start;
}
- 1
- 2
- 3
- 4
在ltr
环境下,弹性子元素flex items将会弹性容器中左对齐。
.flex-container {
-webkit-justify-content: flex-end; /* Safari */
justify-content: flex-end;
}
- 1
- 2
- 3
- 4
在ltr
环境下,弹性子元素flex items将会弹性容器中右对齐。
.flex-container {
-webkit-justify-content: center; /* Safari */
justify-content: center;
}
- 1
- 2
- 3
- 4
弹性子元素flex items将会弹性容器中居中对齐。
.flex-container {
-webkit-justify-content: space-between; /* Safari */
justify-content: space-between;
}
- 1
- 2
- 3
- 4
弹性子元素flex items中的第一个、最后一个对齐弹性容器的边缘,其余均匀分布。
.flex-container {
-webkit-justify-content: space-around; /* Safari */
justify-content: space-around;
}
- 1
- 2
- 3
- 4
弹性子元素flex items中的任何一个都参与均匀分布,即使是第一个和最后一个。
2.4.5 align-items
align-items
设置弹性子元素在弹性容器中当前行侧轴上的对齐方式,跟justify-content
类似但是作用于侧轴(flex-direction为row和row-reverse时为纵轴,flex为column和column-reverse时为横轴)。该属性设置所有flex items(包含匿名的item)的默认对齐方式。
可以接受的值为flex-start、flex-end、center、baseline、stretch等五个值,默认值为stretch。详细如下所示。
.flex-container {
-webkit-align-items: stretch; /* Safari */
align-items: stretch;
}
- 1
- 2
- 3
- 4
弹性子元素将会从侧轴开始到侧轴结束铺满整个高度(宽度)。
.flex-container {
-webkit-align-items: flex-start; /* Safari */
align-items: flex-start;
}
- 1
- 2
- 3
- 4
弹性子元素将会堆栈在弹性容器的侧轴开始位置。
.flex-container {
-webkit-align-items: flex-end; /* Safari */
align-items: flex-end;
}
- 1
- 2
- 3
- 4
弹性子元素将会堆栈在弹性容器的侧轴结束位置。
.flex-container {
-webkit-align-items: center; /* Safari */
align-items: center;
}
- 1
- 2
- 3
- 4
弹性子元素将会堆栈在弹性容器的侧轴中间位置。
.flex-container {
-webkit-align-items: baseline; /* Safari */
align-items: baseline;
}
- 1
- 2
- 3
- 4
弹性子元素将会以文字基线的方式对齐。
注意,通过这里了解基线计算的更多细节。
2.4.6 align-content
当弹性容器侧轴中有空白时,align-content
属性设置伸缩行的对齐方式,正如justify-content
在主轴上设置对齐方式一样。
可以接受的值为:stretch、flex-start、flex-end、center、space-between、space-around等, 默认值为stretch。
.flex-container {
-webkit-align-content: stretch; /* Safari */
align-content: stretch;
}
- 1
- 2
- 3
- 4
各行平分剩余空间。
.flex-container {
-webkit-align-content: flex-start; /* Safari */
align-content: flex-start;
}
- 1
- 2
- 3
- 4
各行堆栈紧靠侧轴起始边界。
.flex-container {
-webkit-align-content: flex-end; /* Safari */
align-content: flex-end;
}
- 1
- 2
- 3
- 4
各行堆栈紧靠侧轴结束边界。
.flex-container {
-webkit-align-content: center; /* Safari */
align-content: center;
}
- 1
- 2
- 3
- 4
各行堆栈位于侧轴居中位置。
.flex-container {
-webkit-align-content: space-between; /* Safari */
align-content: space-between;
}
- 1
- 2
- 3
- 4
各行之间空白均匀分布,第一行和最后一行紧靠侧轴边缘。
.flex-container {
-webkit-align-content: space-around; /* Safari */
align-content: space-around;
}
- 1
- 2
- 3
- 4
各行在弹性盒子中均匀分布,两端保留子元素与子元素之间间距大小的一半。
注意
- 该属性只作用于弹性容器里拥有多行的情况,如果只有单行该属性无效。另外。
上面所说的“行”指的是主轴方向的平行的数据,例如flex-direction值为row、row-reverse时指数据行,值为column、column-reverse时指数据列。
2.4.7 注意事项
- 所有的
column-
属性对弹性容器无效 ::first-line
和::first-letter
伪对象对弹性容器无效
2.5 弹性子元素(Flex item)属性
2.5.1 order
order属性控制弹性容器里子元素的顺序,默认情况下按照弹性容器里添加的顺序排列。
可以接受的值为整型数字,默认值为0.
.flex-item {
-webkit-order: <integer>; /* Safari */
order: <integer>;
}
- 1
- 2
- 3
- 4
弹性子元素将按照给定的数字进行排列,如下图所示。
2.5.2 flex-grow
该属性设置弹性子元素的扩展比率(flex-grow),该值决定某个子元素相对于其他普通子元素的扩展大小。
可接受值为数字,默认值为0,负数无效。
.flex-item {
-webkit-flex-grow: <number>; /* Safari */
flex-grow: <number>;
}
- 1
- 2
- 3
- 4
如果所有的弹性子元素具有相等的flex-grow
值,那么所有的子元素将具有相同的大小。
第二个元素可以相对比较大,如下图所示。
2.5.3 flex-shrink
该属性设置弹性子元素的收缩比率(flex-shrink),该值决定某个子元素相对于其他普通子元素的收缩大小。
.flex-item {
-webkit-flex-shrink: <number>; /* Safari */
flex-shrink: <number>;
}
- 1
- 2
- 3
- 4
默认情况下所有子元素都可以被收缩,如果设置为0,则不收缩。
2.5.4 flex-basis
该属性指定弹性子元素伸缩前的默认大小值,相当于width和height属性。
.flex-item {
-webkit-flex-basis: auto | <width>; /* Safari */
flex-basis: auto | <width>;
}
- 1
- 2
- 3
- 4
可接受值为数字、百分比和auto,默认值为auto(
无特定宽度值,取决于其它属性)。
如下图所示,我们设置第四个子元素的宽度值。
注意,未来可能将会引入新的关键字。
2.5.5 flex
该属性为flex-grow, flex-shrink
和flex-basis
属性的复合属性,一个简写的方式。
.flex-item {
-webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}
- 1
- 2
- 3
- 4
默认值为:0 1 auto。
注意, W3C推荐使用复合属性的方式,因为复合属性的方式可以方便地重置没有指定具体值的属性以适应大部分的常规应用。
2.5.6 align-self
align-self
允许独立的弹性子元素覆盖弹性容器的默认对齐设置(align-items)。大家到align-items部分获取不同值得不同表现方式。
.flex-item {
-webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
- 1
- 2
- 3
- 4
默认值为auto。
第三个和第四个弹性子元素将使用align-self
属性覆盖默认对齐方式。
Note: The value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent.
注意,指定algin-self
为auto时,将使用弹性容器的align-items
属性或者如果没有父对象时使用stretch属性。
2.5.7 注意
float
、clear
、vertical-align
对flex item无效。
2.6 Flexbox实验场
原文的实验场angular地址被墙,我fork了下进行了修改,请大家在线研究,或者到github关注原项目。
3. 声明
前端开发whqet,关注前端开发,分享相关资源。csdn专家博客,王海庆希望能对您有所帮助,限于作者水平有限,出错难免,欢迎拍砖!
欢迎任何形式的转载,烦请注明装载,保留本段文字。
CSS3 Flexbox可视化指南的更多相关文章
- 转载:CSS3 Flexbox可视化指南
0. 目录 目录 引言 正文 1 引入 2 基础 3 使用 4 弹性容器Flex container属性 41 flex-direction 42 flex-wrap 43 flex-flow 44 ...
- CSS Flexbox 学习指南、工具与框架
Flexbox 是一种更有效的布局方式,它能更好的分配容器空间,并控制项目的对齐.虽然,掌握它的理论有些复杂,但幸运的是,我们可以借助开放的网络来学习并逐步掌握它. 在本文中,我们整合了一些最佳的 F ...
- 一篇完整的FlexBox布局指南
一篇完整的FlexBox布局指南 转载请标注本文链接并附带以下信息: 译:Cydiacen 作者:CHRIS COYIER 原文:A Complete Guide to Flexbox 原文更新于 2 ...
- Flexbox 完全指南
Flexbox 完全指南 我不是这篇文章的原创作者,我只是好文章的搬运工.原文地址 A Complete Guide to Flexbox 应用于 flex container 的属性 display ...
- CSS3 Flexbox轻松实现元素的水平居中和垂直居中
CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...
- 转:CSS3 Flexbox 布局介绍
转:CSS3 Flexbox 布局介绍 Flexbox是一个用于页面布局的全新CSS3模块功能.它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间.较为复杂的布 ...
- React Native Flexbox & CSS3 Flexbox
React Native Flexbox & CSS3 Flexbox https://facebook.github.io/react-native/docs/flexbox/ https: ...
- CSS3 Flexbox轻巧实现元素的水平居中和垂直居中
CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...
- CSS3 Flexbox轻巧实现元素的水平居中和垂直居中(转)
CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...
随机推荐
- BZOJ.3585.mex(线段树)
题目链接 题意:多次求区间\(mex\). 考虑\([1,i]\)的\(mex[i]\),显然是单调的 而对于\([l,r]\)与\([l+1,r]\),如果\(nxt[a[l]]>r\),那么 ...
- ROS知识(24)——ros::spin()和spinOnce的含义及其区别
1.ros::spin()和spinOnce含义 如果在节点中如果订阅了话题,那么就必须要调用ros::sping()或者ros::spinOnce()函数去处理话题绑定的回调函数,否则该节点将不会调 ...
- 修复bug及修复过程
1.本地存储数据显示不出问题 问题细节: 本地使用如下语句存储成绩,"ScoreDisplay"为键,值为this.score.toString(),但是在cocos creato ...
- c++内存管理的一些资料
C++内存分配方式详解--堆.栈.自由存储区.全局/静态存储区和常量存储区 如何动态调用DLL中的导出类 在dll中导出类,并结合继承带来的问题 如何更好的架构一个界面库,欢迎大家一起讨论 pim ...
- WordPress主题开发实例:获取当前分类的文章列表
思路: 如果使用默认的wordpress的方法,调出来的数据就会被后台的显示个数所限制,而我们需要的是自由控制文章数和翻页,所以我使用WP_Query 获取当前分类的方法可以通过 get_query_ ...
- 奇怪吸引子---LuChen
奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...
- 浅谈压缩感知(二十三):压缩感知重构算法之压缩采样匹配追踪(CoSaMP)
主要内容: CoSaMP的算法流程 CoSaMP的MATLAB实现 一维信号的实验与结果 测量数M与重构成功概率关系的实验与结果 一.CoSaMP的算法流程 压缩采样匹配追踪(CompressiveS ...
- [Python设计模式] 第2章 商场收银软件——策略模式
github地址: https://github.com/cheesezh/python_design_patterns 题目 设计一个控制台程序, 模拟商场收银软件,根据客户购买商品的单价和数量,计 ...
- MySql之查询基础与进阶
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/8283547.html 一:基本查询 SELECT [DISTINCT] 列1,列2,列3... FROM 表 ...
- 【翻译自mos文章】在10g中,当发生ORA-00020时,sqlplus登陆会报“connected to an idle instance”
在10g中.当发生ORA-00020时,sqlplus登陆会报"connected to an idle instance" 来源于: Sqlplus Logon Reports ...