弹性布局在web前端开发中的应用问题研究

◇三门峡职业技术学院信息传媒学院 南楠

在前端开发过程中，响应式布局是目前使用较多的一种布局方式，flex弹性布局又能比传统布局更好的适应不同终端的需求，实现页面完美的从PC端过渡到移动端，对网页元素的垂直居中、等比排列有较好的优越感，但有时也会使代码不够精确及增加额外的css代码量，实际开发中会出现多种问题。本文分析弹性布局的优劣，针对弹性布局使用过程中常见问题给出有效解决办法，为flex弹性布局的广泛使用奠定基础。

1 引言

Web前端开发中，默认布局为从上至下的标准文档流式排版，网页版面无规划设计，看起来单调、混乱，用户体验感不强。这时网页布局重要性就凸显出来，将不同内容按模块进行划分，有序排列，使网页排版变得更加丰富、美观，提高网页点击率，并增强用户良好的体验感。

传统布局方案中基本依赖于浮动、定位加元素转化属性实现模块排布，布局属性的设置较为松散，当页面结构发生变化时，布局的属性值都需要重新调整，页面结构灵活程度不够好[1]。响应式页面是目前的发展趋势，任何一个页面都能在不同的终端上自由切换，满足用户的需求才是web前端开发的重点，flex弹性布局就是一种最好的选择，可以使页面结构自由变化以适应pc端和移动终端的需求。

2 flex弹性布局技术

2.1 flex弹性布局概述

在CSS3中提供了一种崭新的布局方式：flexible box，简称为flex弹性盒布局，能更好的提供一种自适应不同终端的布局方式。通过flex布局方式可以有效的设计、排列和调整一个容器中的子元素布局方式，而且子元素的大小可以是未知的或弹性的。一个弹性盒模型由包围在外部的容器、内部的子元素和两条纵横主轴构成，默认情况下子元素的排列方向与横轴保持一致。通过父元素设置flex相关属性，对内部子元素的尺寸、位置、顺序灵活调整，在不同类型的终端设备上完美显示网页内容[2]。

2.2 flex弹性布局属性

Flex布局提供了很多属性来设置容器子元素的位置、顺序、占比等，通过对常见属性的合理设置来达到网页的最佳预期效果，这些属性如表1所示。

表1 flex常见属性表

表中前四个属性设置在弹性容器样式上，即对父元素进行设置，后两个属性设置在弹性容器子元素的样式上。

2.3 flex弹性布局优点

传统布局方式依赖于浮动、定位来对模块进行排列，版式固定，不能适应各种终端屏幕的显示需求；媒体查询可以实现响应式布局，但在捕捉到下一个视口前，页面布局不会变化，仅适用于网页间平缓过渡；百分比布局虽提高了子元素的灵活性，但针对有些浏览器解析边框和外间距不同，会导致布局错乱，使用flex弹性布局在前端开发中可以很好地解决上述问题。它可以轻松地创建响应式布局，使CSS的属性赋值统一，实现整体控制方法，还增加了盒模型的灵活性，具有更直观、高效的优点[3]。

2.4 flex布局技术使用注意事项

虽然弹性布局有诸多优点，但使用过程中还是有很多注意事项，简述如下[4]：

（1）弹性容器中每一个子元素默认是没有间隔的。

（2）弹性布局默认不改变子元素的宽度，但是它默认改变子元素的高度，align-self属性可以改变这种行为，默认值是stretch。

（3）flex设置后默认不会换行，可以通过设置子元素宽度的百分比，实现换行效果，或者使用flex-wrap进行换行。

（4）flex基本可以取代float，所以如果使用flex布局，就尽量用flex的属性取代浮动效果。

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

3 弹性布局常见问题及解决方法

随着移动终端使用的增多，弹性布局的应用越来越广泛，但虽然属性及属性值是固定的，可在web前端实际开发中仍然存在一些问题，导致弹性布局发生错位、某些属性值失效问题，现将常见问题分析提出有效解决途径，问题及解决办法如下：

问题一：弹性布局中子元素宽、高设置失效。

解决途径：当父元素被设定了display:flex;属性后，子元素内容过多时，会导致原本设置的宽高不再满足需求，盒模型中子元素的宽、高设置失效，此时可在子元素上设置flex-grow或flex-shrink属性值为0，即不自动增长和缩小空间，子元素宽、高即可按实际属性值显示。示例图如图1、图2所示。

图1 宽度设置无效

图2 按实际宽度显示

问题二：弹性盒模型中子元素文本内容过多时溢出省略号失效。

解决途径：弹性盒模型中部分自适应宽度的子元素文字内容过多时，需要设置为省略号显示，此时会发现设置了textoverflow属性值为ellipsis时，文字没有换行且没显示省略号，如下图3所示，解决该问题的方法一般有两种，第一种是在弹性盒模型子元素内设置width属性为固定宽度，另一种方法是在子元素的父元素上设置width属性，文本溢出省略号效果即可生效，如图4所示[5]。

图3 省略号设置失效

图4 省略号设置生效

问题三：弹性盒模型设定flex-wrap:wrap;属性自动换行后，两行子元素纵向间会出现空白间距，如图5所示。

解决途径：在某些实际项目开发中，弹性盒模型父元素需要设置固定高度，此时一行不能完全显示子元素时需设置自动换行属性flex-wrap:wrap;，这时发现两行间出现空白间距，此时给父级盒模型css样式中加入align-content：flex-start后，即可解决该问题，这时相当于以父级盒模型头部为基准线进行对齐，如图5、图6所示。

图5 行间出现多余间距

图6 清除多余行间隔

问题四：当定位与弹性布局冲突时，如何兼容两种设置。

解决途径：在实际项目开发中，有时需要用到position进行定位，还需要用到flex进行子元素布局，例如完成一个页面的主导航，需要将其固定到页面顶端，并用flex进行导航项对齐，此时发现flex设定失效，导航项左对齐并没有平均分布如图7所示，解决该问题可在现有结构外围嵌套一层div，将position写在外围div的css样式上，flex属性仍然在原有父级盒子上就能够正常实现效果，如图8所示。

图7 flex设置失效

图8 添加父级盒子

问题五：flex应用到图片上时，图片高度自动拉伸。

解决途径：在实际项目开发中，针对某一弹性盒子设置flex属性后，在移动端测试时发现有些浏览器中图片会严重变形，如图9所示（搜狗浏览器），这是因为默认情况下弹性盒模型子元素的排列为纵向拉伸，此时可将align-items属性设置为center，图片即可按设定宽度等比例缩放，如选择图片宽高不一致时，图片虽可等比例缩放，但显示大小不同，解决方法可在图片外嵌套div标签，给div固定宽度，div内图片宽高都设置为100%即可解决该问题。

图9 图片变形

图10 预期效果

4 结语

在移动终端设备种类日趋增多的时代，响应式布局能够开发设计出适应性、兼容性都俱佳的网页。其中重要一环节就是灵活的运用flex属性，它使网页的布局不再仅仅依赖于浮动、定位和固定宽高，随着分辨率的不同能完成网页所有内容自适应完整显示的功能。但仍处在发展阶段，会有很多细节性问题出现，例如各种浏览器的兼容性等。本文就一些常见问题分析提出解决办法，以期为web前端开发人员提供参考，也为web前端良性的发展奠定基础。