[译]flexbox全揭秘
原文:http://css-tricks.com/snippets/css/a-guide-to-flexbox/
弹性布局(弹性盒子,现今仍是w3c的候选推荐),目标在于,对于一个容器中的各个项目块之间能够有效地放置空白的区域,并且不管空白区域是不定宽的、动态的。
弹性布局背后的思想就是 使得容器中的项目块能够改变宽度和高度来最佳地填充可用的空间(为了适应不同类型的设备和屏幕宽度)。一个弹性的盒子能够扩展它里面的项目块来填充空间,或者压缩它们防止溢出。
最重要的是,弹性布局与传统的布局相比是方向无关的(传统中垂直布局是块状布局、水平布局是内联布局)。传统布局能够很好的为网页工作,但是缺少弹性来支持大型和复杂的应用(特别当涉及到方向的变化、调整、拉伸和收缩等)。
基础知识
flexbox这一个模块而不是一个属性,它涉及到了一系列的属性。其中一些属性是设置在容器上的(父元素,被称为弹性容器),而一些属性是设置在子元素上的(被称为弹性项目块/弹性内容)。

- main axis - 弹性容器的主轴是弹性项目块布局的主要数轴。 注意,主轴不一定是水平的;它依赖于flex-direction这个属性的设置
- main-start | main-end - 弹性项目块在主轴上布局,从main-start方向开始到main-end结束
- main size - 弹性项目块在主轴上的宽度或者高度
- cross axis - 垂直于主轴的轴线叫做交叉轴。它的方向依赖于主轴的方向
- cross-start | cross-end - 弹性项目块在交叉轴上布局,从cross-start开始到cross-end 结束
- cross size 弹性项目块在交叉轴上的宽度或者高度
属性

- CSS3的Columns属性对弹性容器是没有影响的(译者注:CSS3的Columns属性可以参见这里)
- float, clear 和 vertical-align 对弹性项目块没有影响

- row (默认) : 从左到右是ltr; 从右到左是 rtl
- row-reverse : 从右到左是 ltr ; 从左到右是 rtl
- column : 内容按从上到下排列
- column-reverse : 内容按从下到上排列


- flex-start(默认): 内容从开始方向排列
- flex-end: 内容从结束方向排列
- center : 内容集中在中间
- space-between : 内容散落分布在基准线上;第一个内容紧挨着开始线,最后一个内容紧挨着结束线
- space-around : 内容散落分布在基准线上;内容之间以相同的宽度隔开

- flex-start : 内容排列在交叉轴的开始基线处
- flex-end : 内容排列在交叉轴的结束基线处
- center : 排列在交叉轴的中部
- baseline : 内容以它们的基线对齐
- stretch(默认): 上下铺满整个父容器(同样也是会遵循min-width或者max-width的设置)

- flex-start : 多行内容排列在容器的开始基线处
- flex-end : 多行内容排列在容器的结束基线处
- center : 内容排列在容器的中部
- space-between : 每行内容均匀分布;第一行分布在容器的开始处,最后一行分布在容器的结束处
- stretch(默认) : 默认内容占满整个剩余的空间






例子




相关属性
其他资源
浏览器支持
- (modern) 指最近的语法(display:flex;)
- (hybrid) 11年的语法 (display: flexbox;)
- (old) 09年的老语法 (display:box)

[译]flexbox全揭秘的更多相关文章
- Mysql性能优化全揭秘-庖丁解牛
「为什么写」 一直想写数据库相关的文章,最直接的原因是数据库这块我们工作中每天都会用到,也是面试求职绕不开的话题,无论你是何种测试,优秀的数据库能力都会非常加分,最近我在总结数据库性能优化这块内容,性 ...
- android studio...混淆打包全揭秘
前言,当前android studio使用的版本较新,低版本的如果有差异,或者问题,欢迎拍砖! 1.修改配置文件 找到配置文件,build.gradle,修改如下. signingConfigs ...
- MySQL DBA面试全揭秘
来源:http://ourmysql.com/archives/1426 本文起源于有同学留言回复说想了解下MySQL DBA面试时可能涉及到的知识要点,那我们今天就来大概谈谈吧. MySQL DBA ...
- [转]MySQL DBA面试全揭秘
本文起源于有同学留言回复说想了解下MySQL DBA面试时可能涉及到的知识要点,那我们今天就来大概谈谈吧. MySQL DBA职位最近几年特别热门,不少朋友让我帮忙推荐什么的,也有很多公司找不到合 ...
- php会话全揭秘
一:php中sesion的配置 二: php手册中的函数 1:bool session_start ( void ) 启动新会话或者重用现有会话 当会话自动开始或者通过 session_start( ...
- 虚拟机体验NAS私人云全揭秘:序言——虚拟机体验NAS私人云缘由
"世界在新冠肺炎疫情后将永远改变",对于2020春天在全球蔓延的新冠肺炎疫情,美国前国务卿基辛格做了这样的评价.确实,也改变了我们.春节期间,本着少添乱的原则,响应国家号召,自我隔 ...
- 移动Web初级入门
最好的阅读是输出. –玉伯 即将开始涉入移动Web了,有点小兴奋也有点小紧张,希望能在未来的团队里带来一些价值.记录一下我现在所认识的移动Web. 原文摘自我的前端博客,欢迎大家来访问 原文地址:ht ...
- 利用flexbox实现按字符长度排列dom元素
说明:请使用chrome浏览器打开 See the Pen pvyjGV by lilyH (@lilyH) on CodePen. 如上图所示,我们你要实现的效果就是,(1)在一行中显示两块元素:( ...
- 全屏API
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2679 二.相关文章以 ...
随机推荐
- docker 基础使用
搜索某个镜像: docker search busybox 拉取: docker pull busybox 查看: docker images 启动并运行: docker run -it b ...
- CentOS yum 源的配置与使用
一.yum 简介 yum,是Yellow dog Updater, Modified 的简称,是杜克大学为了提高RPM 软件包安装性而开发的一种软件包管理器.起初是由yellow dog 这一发行版的 ...
- CentOS安装Apache-2.4.10+安全配置
注:以下所有操作均在CentOS 6.5 x86_64位系统下完成. #准备工作# 在安装Nginx之前,请确保已经使用yum安装了各基础组件,并且配置了www用户和用户组,具体见<CentOS ...
- python注释、脚本参数、字节码
python注释.脚本参数.字节码 --道心 python安装 1.下载安装包 https://www.python.org/downloads/ 2.安装 默认安装路径:C:\python27 3. ...
- vim 学习积累(一)
首先是简单的认识了三种状态(大家公认的说法是模式),分别是:插入,视图,和一般. 进入vim之后默认的是一般模式,这时直接使用'a', 'i', 'o'(也就是进入vim之后直接按下a/i/o键均可进 ...
- Resources.Load加载文件返回null的原因
1.文件夹都要放在Resources目录下 2.加载时photoName不需要扩展名 Texture2D t = Resources.Load<Texture2D>("Loadi ...
- Oracle 获取当前日期及日期格式
http://blog.sina.com.cn/s/blog_6168ee920100l2ye.html Oracle 获取当前日期及日期格式 获取系统日期: SYSDATE() 格式化日期: ...
- mobiscroll之treelist使用
前言 进行前端开发工作也有一段时间了,一直以来都是渣渣,以前开通博客写过一段时间但是没坚持下来,现在想有时候还是得写写什么吧,自己遇到的新东西写写归纳总结一下总归是好的,并且能够与更多人交流分享,相互 ...
- 解读ASP.NET 5 & MVC6系列(17):MVC中的其他新特性
(GlobalImport全局导入功能) 默认新建立的MVC程序中,在Views目录下,新增加了一个_GlobalImport.cshtml文件和_ViewStart.cshtml平级,该文件的功能类 ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...