原文:http://css-tricks.com/snippets/css/a-guide-to-flexbox/

弹性布局(弹性盒子,现今仍是w3c的候选推荐),目标在于,对于一个容器中的各个项目块之间能够有效地放置空白的区域,并且不管空白区域是不定宽的、动态的。

弹性布局背后的思想就是 使得容器中的项目块能够改变宽度和高度来最佳地填充可用的空间(为了适应不同类型的设备和屏幕宽度)。一个弹性的盒子能够扩展它里面的项目块来填充空间,或者压缩它们防止溢出。

最重要的是,弹性布局与传统的布局相比是方向无关的(传统中垂直布局是块状布局、水平布局是内联布局)。传统布局能够很好的为网页工作,但是缺少弹性来支持大型和复杂的应用(特别当涉及到方向的变化、调整、拉伸和收缩等)。

注意: 弹性布局主要适用于应用中的组件,是小规模的布局。而栅格布局更适合用来做大型规模的布局。
 

基础知识

flexbox这一个模块而不是一个属性,它涉及到了一系列的属性。其中一些属性是设置在容器上的(父元素,被称为弹性容器),而一些属性是设置在子元素上的(被称为弹性项目块/弹性内容)。

如果说常规的布局是基于块状元素和内联元素的的流式方向,弹性布局就是基于“弹性的流式方向”。请看下面的图例,解释了弹性布局背后的主要思想。
基本上,项目块要么布局在主轴上(上图中从main start开始到main end结束);要么布局在交叉轴上(上图中从cross start开始到cross end结束)。
  • 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 弹性项目块在交叉轴上的宽度或者高度

属性

display : flex | inline-flex ; (运用在父元素弹性容器上)
 
这个属性定义出一个弹性容器;容器以内联或者块级方式布局取决于给定的值
 
请注意的是:
  • CSS3的Columns属性对弹性容器是没有影响的(译者注:CSS3的Columns属性可以参见这里
  • float, clear 和 vertical-align 对弹性项目块没有影响
flex-direction (应用在弹性容器的父元素上)
 
这个属性决定了主轴的方向,因为它确定了弹性项目块在弹性容器中的方向
  • row (默认) : 从左到右是ltr; 从右到左是 rtl
  • row-reverse : 从右到左是  ltr ; 从左到右是 rtl
  • column : 内容按从上到下排列
  • column-reverse : 内容按从下到上排列
flex-flow(应用在弹性容器的父元素上)
 
是属性'flex-direction' 和 ‘flex-wrap’ 的缩写,能够同时定义弹性容器的主轴和交叉轴。默认的值是 ‘row nowrap’
 
 
justify-content(应用在弹性容器的父元素上)
 
定义了主轴方向上的布局,它的作用是分发除了弹性内容以外的空白区域
 
  • flex-start(默认): 内容从开始方向排列
  • flex-end:  内容从结束方向排列
  • center : 内容集中在中间
  • space-between : 内容散落分布在基准线上;第一个内容紧挨着开始线,最后一个内容紧挨着结束线
  • space-around : 内容散落分布在基准线上;内容之间以相同的宽度隔开

align-items(应用在弹性容器的父元素上)
 
这个属性定义的是弹性项目块在交叉轴方向上的排列方式。可以认为是justify-content这个属性在交叉轴方向上的应用(前者是在主轴上)
  • flex-start : 内容排列在交叉轴的开始基线处
  • flex-end : 内容排列在交叉轴的结束基线处
  • center : 排列在交叉轴的中部
  • baseline : 内容以它们的基线对齐
  • stretch(默认): 上下铺满整个父容器(同样也是会遵循min-width或者max-width的设置)

align-content(应用于弹性容器元素上)
 
当交叉轴方向上有多余的空白部分的时候,此属性定义了多行之间的排列方式,类似于justify-content在主轴上对单个内容的影响
 
注意:当容器内的内容只有一行的时候,此属性没有任何影响
  • flex-start : 多行内容排列在容器的开始基线处
  • flex-end : 多行内容排列在容器的结束基线处
  • center : 内容排列在容器的中部
  • space-between : 每行内容均匀分布;第一行分布在容器的开始处,最后一行分布在容器的结束处
  • stretch(默认) : 默认内容占满整个剩余的空间

order(应用在弹性内容上)
 
默认情况下,弹性项目块按原始顺序布局。不过 ,order这个属性可以控制项目块在容器中的顺序。
 
flex-grow(应用在弹性内容上)
 
定义了一个弹性项目块的弹性增长的情况。该属性的值是数字,用数字来作为比例。决定了弹性容器中的项目块占领的可用空间的大小。
 
如果所有的弹性项目块都设置flex-grow:1, 那么每个项目块在容器中都会被设置成相同的大小。如果你给其中一个项目块设置了flex-grow:2,那么这个项目块占用的空间就会是别的项目块的两倍。
注意: 负值是不允许使用的。
 
 
flex-shrink (应用在弹性的内容上)
 
定义了弹性内容的收缩情况;同样负值也是不允许的
 
 
 
flex-basis(应用在弹性内容上)
 
在剩余空间分配之前,定义了元素的基准 伸缩值
 
flex (应用在弹性内容上)
 
这个内容是flex-grow, flex-shrink, flex-basis这三个属性是缩写形式。 第二和第三个参数(flex-shrink, flex-basis)是可选的。默认值是
0 1 auto.
 
align-self(应用在弹性内容上)
 
这个属性能够覆盖默认的对齐方式或者是align-items属性定义的方式
 
具体的属性value值得含义可以参考align-items的解释
 

例子

从一个简单的例子入手,解决一个最常遇到的问题:完美的居中。 用flexbox实在是再简单不过了。
 
这依赖于margin值设置为auto来吸收到额外的空间。所以设置一个margin为auto 的值能够使得内容完美的居中于两个轴之间。
 
现在来使用更多的属性。考虑有个6个项目块,每块都有一个固定的宽度,但是能够自动调整。需求就是让他们能够均匀的分布在水平轴上,并且当我们调整浏览器的时候,也是能够自适应的(不要使用媒体查询的方法 ).
 
这样就完成了。其他的就是一些样式上的问题了。下面是一个例子。去CodePen上,改变一下你的屏幕大小,看看会发生什么。
让我们试试别的东西。想象一下我们有一个位于网站上部靠右对齐的导航,但是我们想让它能够在中等屏幕以及更小尺寸的屏幕上居中。
那么很简单。
 
让我们用flexbox来做一些更加高级的弹性功能!移动的3栏布局,并且拥有全屏宽的头部和底部。并且独立于原始的顺序。
 
 

相关属性

其他资源

浏览器支持

  • (modern) 指最近的语法(display:flex;)
  • (hybrid) 11年的语法 (display: flexbox;)
  • (old) 09年的老语法 (display:box)

黑莓浏览器10+ 支持新语法
 
有关如何搭配语法使得能够支持更多的浏览器,请参考this article (CSS-Tricks)或者this article (DevOpera).
下面是一个sass,解决浏览器的支持问题。

[译]flexbox全揭秘的更多相关文章

  1. Mysql性能优化全揭秘-庖丁解牛

    「为什么写」 一直想写数据库相关的文章,最直接的原因是数据库这块我们工作中每天都会用到,也是面试求职绕不开的话题,无论你是何种测试,优秀的数据库能力都会非常加分,最近我在总结数据库性能优化这块内容,性 ...

  2. android studio...混淆打包全揭秘

    前言,当前android studio使用的版本较新,低版本的如果有差异,或者问题,欢迎拍砖! 1.修改配置文件 找到配置文件,build.gradle,修改如下.    signingConfigs ...

  3. MySQL DBA面试全揭秘

    来源:http://ourmysql.com/archives/1426 本文起源于有同学留言回复说想了解下MySQL DBA面试时可能涉及到的知识要点,那我们今天就来大概谈谈吧. MySQL DBA ...

  4. [转]MySQL DBA面试全揭秘

      本文起源于有同学留言回复说想了解下MySQL DBA面试时可能涉及到的知识要点,那我们今天就来大概谈谈吧. MySQL DBA职位最近几年特别热门,不少朋友让我帮忙推荐什么的,也有很多公司找不到合 ...

  5. php会话全揭秘

    一:php中sesion的配置 二: php手册中的函数 1:bool session_start ( void )  启动新会话或者重用现有会话 当会话自动开始或者通过 session_start( ...

  6. 虚拟机体验NAS私人云全揭秘:序言——虚拟机体验NAS私人云缘由

    "世界在新冠肺炎疫情后将永远改变",对于2020春天在全球蔓延的新冠肺炎疫情,美国前国务卿基辛格做了这样的评价.确实,也改变了我们.春节期间,本着少添乱的原则,响应国家号召,自我隔 ...

  7. 移动Web初级入门

    最好的阅读是输出. –玉伯 即将开始涉入移动Web了,有点小兴奋也有点小紧张,希望能在未来的团队里带来一些价值.记录一下我现在所认识的移动Web. 原文摘自我的前端博客,欢迎大家来访问 原文地址:ht ...

  8. 利用flexbox实现按字符长度排列dom元素

    说明:请使用chrome浏览器打开 See the Pen pvyjGV by lilyH (@lilyH) on CodePen. 如上图所示,我们你要实现的效果就是,(1)在一行中显示两块元素:( ...

  9. 全屏API

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2679 二.相关文章以 ...

随机推荐

  1. docker 基础使用

    搜索某个镜像: docker  search  busybox 拉取: docker  pull  busybox 查看: docker  images 启动并运行: docker run -it b ...

  2. CentOS yum 源的配置与使用

    一.yum 简介 yum,是Yellow dog Updater, Modified 的简称,是杜克大学为了提高RPM 软件包安装性而开发的一种软件包管理器.起初是由yellow dog 这一发行版的 ...

  3. CentOS安装Apache-2.4.10+安全配置

    注:以下所有操作均在CentOS 6.5 x86_64位系统下完成. #准备工作# 在安装Nginx之前,请确保已经使用yum安装了各基础组件,并且配置了www用户和用户组,具体见<CentOS ...

  4. python注释、脚本参数、字节码

    python注释.脚本参数.字节码 --道心 python安装 1.下载安装包 https://www.python.org/downloads/ 2.安装 默认安装路径:C:\python27 3. ...

  5. vim 学习积累(一)

    首先是简单的认识了三种状态(大家公认的说法是模式),分别是:插入,视图,和一般. 进入vim之后默认的是一般模式,这时直接使用'a', 'i', 'o'(也就是进入vim之后直接按下a/i/o键均可进 ...

  6. Resources.Load加载文件返回null的原因

    1.文件夹都要放在Resources目录下 2.加载时photoName不需要扩展名 Texture2D t = Resources.Load<Texture2D>("Loadi ...

  7. Oracle 获取当前日期及日期格式

    http://blog.sina.com.cn/s/blog_6168ee920100l2ye.html Oracle 获取当前日期及日期格式 获取系统日期:  SYSDATE()   格式化日期:  ...

  8. mobiscroll之treelist使用

    前言 进行前端开发工作也有一段时间了,一直以来都是渣渣,以前开通博客写过一段时间但是没坚持下来,现在想有时候还是得写写什么吧,自己遇到的新东西写写归纳总结一下总归是好的,并且能够与更多人交流分享,相互 ...

  9. 解读ASP.NET 5 & MVC6系列(17):MVC中的其他新特性

    (GlobalImport全局导入功能) 默认新建立的MVC程序中,在Views目录下,新增加了一个_GlobalImport.cshtml文件和_ViewStart.cshtml平级,该文件的功能类 ...

  10. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...