CSS3的Flexbox布局的简明入门指南

前端  /  管理员 发布于 7年前   375

Flexbox布局概念

Flexbox布局（ Flexible Box 或CSS3 弹性布局），是CSS3中的一种新的布局模式，是可以自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间，收缩内容防止内容溢出，确保元素拥有恰当的行为的布局方式。使用Flexbox来布局更容易，可以使用更少的代码，更简单的方式实现更复杂的布局，例如对齐方式，排列方向，排列顺序（这也是Flexbox布局的核心能力所在），弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中 的顺序是独立的，通过使用弹性盒，定位子元素变得更加简单，复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素，而不是基于代码的声明和导航顺序。

不同于块级元素基于垂直方向布局以及行内元素基于水平方向布局，弹性盒布局的算法是方向无关的。 虽然块级元素布局在页面中工作良好，但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要进行协作而做出的努力。

名词与基础

Flexbox是一个完整的布局模块，不是单一的属性，设计的属性有很多。Flexbox布局主要由父容器和它的直接子元素组成，其中父容器被称之为flex container（flex容器），而其直接的子元素称作为flex item（flex元素）。

Flexbox布局按照宽和高涉及的基本概念名称有main axis(主轴)和cross axis(交叉轴，和主轴垂直)，主轴起点边称为main start,主轴终点边称为main end，交叉轴起点边称为cross start,交叉轴终点边称为cross end。如图：

main axis（主轴）:Flex容器的主轴主要用来排列Flex元素。它不一定是水平，这主要取决于flex-direction属性。
main-start（主轴起点边） | main-end（主轴终点边）:Flex元素的排列从容器的主轴起点边开始，往主轴终点边结束。
main size:Flex元素的在主轴方向的宽度或高度就是项目的主轴长度，Flex元素的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。
cross axis（和主轴垂直交叉的轴）:与主轴垂直的轴称作交叉轴。
cross-start（交叉轴起点边） | cross-end（交叉轴终点边）:伸缩行的排列从容器的交叉轴起点边开始，往交叉轴终点边结束。
cross size:Flex元素的在交叉轴方向的宽度或高度就是项目的交叉轴长度，Flex元素的交叉轴长度属性是width或height属性，由哪一个对着交叉轴方向决定。

例子

新的 flexbox 布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多，导致各个浏览器对它的实现也有所不同。不过我仍旧想要分享一些例子，来让你知道即将发生的改变。这些例子目前只能在支持 flexbox 的 Chrome 浏览器中运行，基于最新的标准。
使用flexbox你还可以做的更多；这里只是一些让你了解概念的例子：

使用 Flexbox 的简单布局

CSS Code复制内容到剪贴板

1. .container {   
2.   display: -webkit-flex;   
3.   display: flex;   
4. }   
5. nav {   
6.   width: 200px;   
7. }   
8. .flex-column {   
9.   -webkit-flex: 1;   
10.           flex: 1;   
11. }  

使用 Flexbox 的牛逼布局

CSS Code复制内容到剪贴板

1. .container {   
2.   display: -webkit-flex;   
3.   display: flex;   
4. }   
5. .initial {   
6.   -webkit-flex: initial;   
7.           flex: initial;   
8.   width: 200px;   
9.   min-width: 100px;   
10. }   
11. .none {   
12.   -webkit-flex: none;   
13.           flex: none;   
14.   width: 200px;   
15. }   
16. .flex1 {   
17.   -webkit-flex: 1;   
18.           flex: 1;   
19. }   
20. .flex2 {   
21.   -webkit-flex: 2;   
22.           flex: 2;   
23. }