弹性（Flex）布局的使用

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

虽然说如此，弹性布局每每会有些潜在的问题，且改动后，要当即查看页面也须要很多时间，所以我把项目中使用弹性布局过程当中遇到的问题稍做整理，为你们之后使用时，能够有效规避这些麻烦。

使用场景

前端开发中，网页布局是很重要的一部分。以前传统布局方案中，基本依赖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。简写还包括：

• flex: 1; -->> flex: 1 1 0%; flex: none; -->> flex: 0 0 auto

• flex: auto; -->> flex: 1 1 auto; flex: 0 auto

• flex: initial -->> flex: 0 1 auto; 即flex的初始值

  
  

开发中遇到的问题

一、子元素被压缩

问题：当设置子容器的长度flex为1时，其余的子容器的长度会被压缩。

解决方法：设置其余子容器的flex-shrink属性为0，这样就不会被压缩。

二、图片使用flex会有间隙

问题：由于有基线的存在，图片会有一些间隙。

解决方法：设置图片的display为block就能够解决。

三、超出隐藏，overflow失效

问题：

text-overflow: ellipsis；不生效，省略号没有出现，并且过长的文字把子容器撑开，没有按预设的超出隐藏。

解决方法：

设子容器width:0;可能出在于子容器没有设置宽度，省略符可能须要对父元素设置宽度，设置为100%无效，当设置为0的时候，子容器恢复到设定的宽度，省略号也出现了。

四、flex致使设置的子元素宽高失效

问题：

父级设置display:flex后，子级设置的heigth:50px失效，只是被子元素撑开了高度。

解决方法：

flex-grow:0;flex-shrink:0;flex-grow属性为是否自动增加空间，flex-shrink属性为是否自动缩小空间，默认值为1，即自动增加/缩小。设置为0时，不会自动增加/缩小，防止固定大小的元素宽度发生变化。

五、flex布局滚动，子元素没法所有显示

问题：

父级使用flex布局，列表页设置flex:1;占满空闲空间，可是全部的列没有彻底显示出来，滚动条也没有出现。

解决方法：

列表外部使用div或其余盒子包裹，使用flex布局，每一个子元素设置最小宽度或实际宽度，或者设width: 0。

使用注意

1. 弹性布局下每个item默认是没有间隔的。

2. 弹性布局默认不改变项目的宽度，可是它默认改变项目的高度，align-self属性能够改变这种行为，默认值是stretch。

3. flex只是比例，但不会换行，能够设置子容器的宽度的百分比，来达到换行的效果，或者使用flex-wrap进行换行。

4. flex基本能够彻底取代float，因此若是使用Flex布局，就尽可能用flex的属性取代浮动效果。

5. flex的布局会使子容器的float、clear和vertical-align属性失效。

做者：霍俊丽

优质文章

运维转型 | 运维人再也不只是“救火英雄”

嘉为科技荣获ITSS【2019中国卓越智能运维服务商】

企业上云如何优化性能？

jmeter集群下脚本日志和报告处理

企业应用运维自动化应该如何设计？