CSS3 Flexbox可视化指南

0. 目录

 

 

1. 引言

原文：scotch.io的A Visual Guide to CSS3 Flexbox Properties 
译者：前端开发whqet，意译为主不当之处，欢迎指正！ 
译言：希望可以通过可视化的方式帮助您了解Flexbox属性如何影响flex布局。大家可以到原文demo那里先一睹为快,注意，需FQ浏览（因为原文调用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了解浏览器兼容情况详情。

本文中的用到的一些术语的表达约定如下

  1. flex-container-弹性容器
  2. flex-item-弹性子元素
  3. main axis-主轴
  4. 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专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！ 
欢迎任何形式的转载，烦请注明装载，保留本段文字。 

posted @ 2015-05-14 08:56  super1234  阅读(766)  评论(0)  编辑  收藏  举报