CSS3 Flexbox可视化指南

心已赠人 2022-08-07 16:49 182阅读 0赞

# **0. 目录** #

*  目录
 *  引言
 *  正文
    
     *  1 引入
     *  2 基础
     *  3 使用
     *  4 弹性容器Flex container属性
        
         *  41 flex-direction
         *  42 flex-wrap
         *  43 flex-flow
         *  44 justify-content
         *  45 align-items
         *  46 align-content
         *  47 注意事项
     *  5 弹性子元素Flex item属性
        
         *  51 order
         *  52 flex-grow
         *  53 flex-shrink
         *  54 flex-basis
         *  55 flex
         *  56 align-self
         *  57 注意
     *  6 Flexbox实验场
 *  声明

# **1. 引言** #

原文：[scotch.io][]的[A Visual Guide to CSS3 Flexbox Properties][]  
译者：前端开发whqet，意译为主不当之处，欢迎指正！  
译言：希望可以通过可视化的方式帮助您了解Flexbox属性如何影响flex布局。大家可以到原文demo那里先[一睹为快][Link 1],**注意**，需翻墙浏览（因为原文调用google api插件），我们提供了另外的[在线实验平台][Link 2]，或者你也可以到github[关注、下载][Link 3]。

# **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）组成。  
![这里写图片描述][20150425083846751]  
在上图所示的盒子里，你可以看到用来描述flex container和flex items的属性和术语，如果你想了解详细信息，请访问W3C的[flexbox model][]官方文档.

flexbox自2009的初次草案开始，已经经历了几次更新和语法修改，为了避免困惑、保证清晰，我们仅仅使用2014年9月最后一次工作草案中的语法。如果您想要实现旧浏览器的兼容，请访问[这篇文章][Link 4]寻找最佳实践。

最近的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; }

如果您想让它以内联方式显示，则

.flex-container { display: -webkit-inline-flex; /* Safari */ display: inline-flex; }

**注意**：仅仅需要在父元素上设置这一个属性即可，它的子元素会自动变成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; }

弹性子元素将会按照自左向右的水平排列。  
![这里写图片描述][20150425092106582]

.flex-container { -webkit-flex-direction: row-reverse; /* Safari */ flex-direction: row-reverse; }

弹性子元素将会自右向左水平排列。  
![这里写图片描述][20150425092128525]

.flex-container { -webkit-flex-direction: column; /* Safari */ flex-direction: column; }

弹性子元素将自上而下竖直排列  
![这里写图片描述][20150425092256930]

.flex-container { -webkit-flex-direction: column-reverse; /* Safari */ flex-direction: column-reverse; }

弹性子元素将自下而上竖直排列  
![这里写图片描述][20150425093116809]

默认值为`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; }

弹性子元素将会在**一行显示**，默认的子元素items将会缩减以适应弹性容器的宽度。  
![这里写图片描述][20150425101114121]

.flex-container { -webkit-flex-wrap: wrap; /* Safari */ flex-wrap: wrap; }

如果需要的话，弹性子元素将会**自左向右、自上而下**地**多行显示**。  
![这里写图片描述][20150425101302354]

.flex-container { -webkit-flex-wrap: wrap-reverse; /* Safari */ flex-wrap: wrap-reverse; }

如果需要的话，弹性子元素将会自**左向右、自下而上**地**多行显示**。  
![这里写图片描述][20150425101632961]

默认值为`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>; }

默认值为`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; }

在`ltr`环境下，弹性子元素flex items将会弹性容器中***左对齐***。  
![这里写图片描述][20150425104833193]

.flex-container { -webkit-justify-content: flex-end; /* Safari */ justify-content: flex-end; }

在`ltr`环境下，弹性子元素flex items将会弹性容器中***右对齐***。  
![这里写图片描述][20150425105045940]

.flex-container { -webkit-justify-content: center; /* Safari */ justify-content: center; }

弹性子元素flex items将会弹性容器中***居中对齐***。

.flex-container { -webkit-justify-content: space-between; /* Safari */ justify-content: space-between; }

弹性子元素flex items中的第一个、最后一个对齐弹性容器的边缘，其余**均匀分布**。  
![这里写图片描述][20150425105439622]

.flex-container { -webkit-justify-content: space-around; /* Safari */ justify-content: space-around; }

弹性子元素flex items中的任何一个都参与**均匀分布**，即使是第一个和最后一个。  
![这里写图片描述][20150425105735284]

### **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; }

弹性子元素将会从侧轴开始到侧轴结束铺满整个高度（宽度）。  
![这里写图片描述][20150427140026799]

.flex-container { -webkit-align-items: flex-start; /* Safari */ align-items: flex-start; }

弹性子元素将会堆栈在弹性容器的侧轴开始位置。  
![这里写图片描述][20150427175646426]

.flex-container { -webkit-align-items: flex-end; /* Safari */ align-items: flex-end; }

弹性子元素将会堆栈在弹性容器的侧轴结束位置。  
![这里写图片描述][20150427175751197]

.flex-container { -webkit-align-items: center; /* Safari */ align-items: center; }

弹性子元素将会堆栈在弹性容器的侧轴中间位置。  
![这里写图片描述][20150427175848933]

.flex-container { -webkit-align-items: baseline; /* Safari */ align-items: baseline; }

弹性子元素将会以文字基线的方式对齐。  
![这里写图片描述][20150427183002093]

**注意**，通过[这里][Link 5]了解基线计算的更多细节。

### **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; }

各行平分剩余空间。  
![这里写图片描述][20150428080619141]

.flex-container { -webkit-align-content: flex-start; /* Safari */ align-content: flex-start; }

各行堆栈紧靠侧轴起始边界。  
![这里写图片描述][20150428080854486]

.flex-container { -webkit-align-content: flex-end; /* Safari */ align-content: flex-end; }

各行堆栈紧靠侧轴结束边界。  
![这里写图片描述][20150428081048928]

.flex-container { -webkit-align-content: center; /* Safari */ align-content: center; }

各行堆栈位于侧轴居中位置。  
![这里写图片描述][20150428081053017]

.flex-container { -webkit-align-content: space-between; /* Safari */ align-content: space-between; }

各行之间空白均匀分布，第一行和最后一行紧靠侧轴边缘。  
![这里写图片描述][20150428084858591]

.flex-container { -webkit-align-content: space-around; /* Safari */ align-content: space-around; }

各行在弹性盒子中均匀分布，两端保留子元素与子元素之间间距大小的一半。  
![这里写图片描述][20150428084933584]

**注意**

*  该属性只作用于弹性容器里拥有多行的情况，如果只有单行该属性无效。另外。
 *  上面所说的“行”指的是主轴方向的平行的数据，例如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>; }

弹性子元素将按照给定的数字进行排列，如下图所示。  
![这里写图片描述][20150428095454695]

### **2.5.2 flex-grow** ###

该属性设置弹性子元素的扩展比率（flex-grow），该值决定某个子元素相对于其他普通子元素的扩展大小。

可接受值为数字，默认值为0，负数无效。

.flex-item { -webkit-flex-grow: <number>; /* Safari */ flex-grow: <number>; }

如果所有的弹性子元素具有相等的`flex-grow`值，那么所有的子元素将具有相同的大小。  
![这里写图片描述][20150428101101993]  
第二个元素可以相对比较大，如下图所示。  
![这里写图片描述][20150428101227169]

### **2.5.3 flex-shrink** ###

该属性设置弹性子元素的收缩比率（flex-shrink），该值决定某个子元素相对于其他普通子元素的收缩大小。

.flex-item { -webkit-flex-shrink: <number>; /* Safari */ flex-shrink: <number>; }

默认情况下所有子元素都可以被收缩，如果设置为0，则不收缩。  
![这里写图片描述][20150428101905326]

### **2.5.4 flex-basis** ###

该属性指定弹性子元素伸缩前的默认大小值，相当于width和height属性。

.flex-item { -webkit-flex-basis: auto | <width>; /* Safari */ flex-basis: auto | <width>; }

可接受值为数字、百分比和auto，默认值为auto（  
无特定宽度值，取决于其它属性）。

如下图所示，我们设置第四个子元素的宽度值。  
![这里写图片描述][20150428102430355]

**注意**，[未来可能将会引入新的关键字][Link 6]。

### **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> ]; }

默认值为：0 1 auto。

**注意**， W3C推荐使用复合属性的方式，因为复合属性的方式可以方便地重置没有指定具体值的属性以适应大部分的[常规应用][Link 7]。

### **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; }

默认值为auto。

第三个和第四个弹性子元素将使用`align-self`属性覆盖默认对齐方式。  
![这里写图片描述][20150428103707674]

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了下进行了修改，请大家[在线研究][Link 2]，或者到github关注[原项目][Link 3]。

# **3. 声明** #

前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！  
欢迎任何形式的转载，烦请注明装载，保留本段文字。  
本文原文链接，[http://blog.csdn.net/whqet/article/details/45154977][http_blog.csdn.net_whqet_article_details_45154977]  
欢迎大家访问独立博客[http://whqet.github.io][http_whqet.github.io]

[scotch.io]: https://scotch.io/
[A Visual Guide to CSS3 Flexbox Properties]: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
[Link 1]: https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground
[Link 2]: http://codepen.io/whqet/full/vOEjVK/
[Link 3]: https://github.com/imjustd/flexbox-playground
[CSS Flexible Box Layout Module]: http://www.w3.org/TR/css-flexbox/
[20150425083846751]: /images/20220805/14ada414db5d4a10b250b10c1e08b3c8.png
[flexbox model]: http://www.w3.org/TR/css-flexbox/#box-model
[Link 4]: https://css-tricks.com/using-flexbox/
[caniuse]: http://caniuse.com/#search=flex
[20150425092106582]: /images/20220805/5b7b1e28b5d3445b832b8ed3daf3ec6a.png
[20150425092128525]: /images/20220805/b67b0ab6be5a4fedbbe121759fa9b005.png
[20150425092256930]: /images/20220805/d3f957da536b4ef3ae8df787eddf0f2e.png
[20150425093116809]: /images/20220805/aa81001c234e42568098f58576886012.png
[20150425101114121]: /images/20220805/cbd0a603067a4741be70c26c88caaec0.png
[20150425101302354]: /images/20220805/25ebf3dd2bb24634a20c22c00cc68b7d.png
[20150425101632961]: /images/20220805/e33269a81d8f4e58a03b889c38364228.png
[20150425104833193]: /images/20220805/86ae0433fdc24dd2a18966c3ce655053.png
[20150425105045940]: /images/20220805/62becf91784c41579444e66184c5032b.png
[20150425105439622]: /images/20220805/67927f96510845b9941d9b5fb0f59c2f.png
[20150425105735284]: /images/20220805/4e9d874675e443c0b5529f7baa123232.png
[20150427140026799]: /images/20220805/4243f145e282481db24d3bb8d02a15ea.png
[20150427175646426]: /images/20220805/22b61118bd854d98af9310962b923382.png
[20150427175751197]: /images/20220805/fb4ef45e844d445e9f90202565b9d74e.png
[20150427175848933]: /images/20220805/0280f12383e04fd991ba2a0b0173f116.png
[20150427183002093]: /images/20220805/7721379253f24daaaa93b2bafb6d2a9a.png
[Link 5]: http://www.w3.org/TR/css-flexbox/#flex-baselines
[20150428080619141]: /images/20220805/5b16c965777e40f7b679401f09e3bed1.png
[20150428080854486]: /images/20220805/e24e586e0a5c4cc794057e89665bf7b8.png
[20150428081048928]: /images/20220805/1981574c3eac45f2b0cc5d2dc0b0939d.png
[20150428081053017]: /images/20220805/e4befc27116a4de09b8a10c9fe76cbfc.png
[20150428084858591]: /images/20220805/926d32e9b5424b61a2bb6e66f6132315.png
[20150428084933584]: /images/20220805/6b9a55f4bb364c58a8a5676d7ef8d7aa.png
[20150428095454695]: /images/20220805/bac93e1dfeaa42be82fab9b241e2c3dd.png
[20150428101101993]: /images/20220805/4fbcada924124eb597269c038b19ad39.png
[20150428101227169]: /images/20220805/e243a49746e1418d8ed6492c7e11c790.png
[20150428101905326]: /images/20220805/1d9695df95a5405cbf9275ede7ca4caf.png
[20150428102430355]: /images/20220805/662f3af653a147e3b3b3a64a82bdec14.png
[Link 6]: http://www.w3.org/TR/css-flexbox/#valdef-flex-basis-main-size
[Link 7]: http://www.w3.org/TR/css-flexbox/#flex-common
[20150428103707674]: /images/20220805/23850d605a254f45b39c03355950e89c.png
[http_blog.csdn.net_whqet_article_details_45154977]: http://blog.csdn.net/whqet/article/details/45154977
[http_whqet.github.io]: http://whqet.github.io