

弹性（Flex）布局的使用

嘉为蓝鲸

2020-02-04

导读：弹性布局使用在什么情况下比较好？开发中会遇到什么问题？怎么处理呢？

最近我参与实施的两个项目中，一个页面交互复杂，而另一个相对传统，两个项目相比之下凸显出了页面布局样式的时间占比不可忽视，使用了弹性布局代码量精简了不少。

虽说如此，弹性布局往往会有些潜在的问题，且改动后，要立即查看页面也需要不少时间，因此我把项目中使用弹性布局过程中遇到的问题稍作整理，为大家以后使用时，可以有效规避这些麻烦。

使用场景

前端开发中，网页布局是很重要的一部分。之前传统布局方案中，基本依赖display + position + float实现，虽然能实现垂直居中，等比排布等，但有时会不够准确并且使css语句过多。

弹性布局最大的优点就是弹性，虽然使用百分比或者媒体查询也可以实现响应布局，但我认为以下几种情况下，flex布局是比较好的选择：

视口中的特定块按照比例进行缩放
一些以基准线对齐的布局
模块垂直居中，水平居中
左中右弹性布局

常用属性

Flex布局概念

flex全称是flexbox（flexible Box），即弹性盒子。这一模块提供更加有效的的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的即弹性的。

包围在外面的即容器，内部的即为项目，也就是说采用Flex布局的元素就是flex容器（display：flex或inline-flex）,它的所有子元素称为flex项目。容器默认存在两根轴线，一根主轴（main axis），一根交叉轴（cross axis），项目默认沿主轴排列。

常用属性

flex-box(容器)和flex-item(项目)各自都有不同的属性，通过对它们进行不同的设置来对整体布局进行调整以达到想要的效果。主要属性包括：

flex-direction：

默认情况下，元素排布从左至右，从上至下。但有时在实际应用中，并不按照默认情况进行排布。默认的是row（从左至右），可以设置成column（从上至下）。如果需要设置成反向，则在后面加上“-reverse”。

justify-content：

规定元素在主轴上的对齐方式。默认的是flex-start（左对齐），可以设置成flex-end（右对齐）和center（居中），也可以设置成space-between（两端对齐，且让剩余空间均匀的分布在每两个元素之间）或是flex-around（剩余空间均匀包裹每一个元素，每两个元素之间的间距是边框距盒内元素距离的二倍）。

align-items：

规定元素在交叉轴上的对齐方式。默认是stretch，即元素在竖直方向上充满整个空间，可以设置成flex-start（起点对齐）、flex-end（终点对齐）和center（居中），除此之外，可以使用baseline对齐，即元素内部第一行文字的基线对齐。

align-content：

当flex盒内元素具有多条轴的时候可以使用。默认的是stretch，即轴线占满整个交叉轴。可以设置为flex-start（与交叉轴的起点对齐），flex-end（与交叉轴的终点对齐），center（竖直居中），和space-between以及space-around。

flex：

可以将flex-grow, flex-shrink, flex-basis进行连写。flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为flex: 0 1 auto。简写还包括：