CSS布局技巧 | flex弹性盒子

flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 本文将侧重于flex弹性盒子布局的介绍，看看flex能解决什么问题，在哪些地方非常适合使用flex布局，也欢迎大家对flex的用法进行补充。

一、问题、痛点

在我们日常使用网站的过程中，我们偶尔会看到一些压缩比例、被拉伸或是错误裁切的图片，给人的观感非常不好，在一些内部网站上会经常发现此类问题，如果你曾负责过这类网站的更新维护，你会发现它们对于上传图片的比例甚至分辨率都有严格的要求，这类网站往往建设久远，多年前建设完成后再也没有更新代码。问题放到现在，其实一个弹性盒子（flex布局）即可解决大部分此类问题。

二、头部网站的解决方案

学习flex布局之前，我曾浏览各大网站，但大多数网站其实没有使用到flex的精髓，比如大多数购物网站，他们的商品列表每个商品封面图都是相同尺寸，这只需要每个商家上传商品封面的时候使用统一标准，并不在建站者的考虑范围内。 而我觉得最值得学习的是图虫网，这是一个摄影交流社区，也是一个商用图片汇聚地，作为一个需要将各种不同尺寸、讲究构图（不能随意裁切）、不能随意拉伸的摄影作品批量展示出来的网站，它在布局方面就注定需要下足功夫，每天展示的图片是不同的，我们需要一套布局解决各种不同尺寸的图片的随机排列，而且最后展现出来的整体效果还要美观，这是设计排版美工干得活，却要让我们这些大多被称为“直男审美”的理工男来做。此时我们的神器flex布局就派上用场了，它似乎就是为了解决这种随机图片的规范排版而诞生的。

三、具体实施

找到了学习的榜样，下一步就开始复刻了，我们需要模仿的只是图片展示区，我们先让页面渲染十几张图片出来，这里我使用的是v-for循环从后台随机拉取13张，初学的同学可以在各大网站上面截取部分不同比例的图片用于练习。

图片放上之后就可以开始布局练习了。首先统一所有图片的高度.newphoto > ul > li > img { height: 300px; } 其次给所有图片外层套一层父盒子，并打上display：flex，设定大盒子的宽度等操作，具体css代码如下：

• display: flex;盒子属性选择为flex
• width: 1200px;宽度可以是rpx等自适应屏幕尺寸的单位
• flex-direction:column;主轴方向为水平（默认值，可省略）
• flex-wrap: wrap;（主轴自动换行）
• justify-content: space-between;两边顶格的主轴平均布局

完成这两步你就可以看到图片已经按照你的想法，整齐地排布于页面之中了，然后再补充上一些细节比如头像，点赞数评论数。就能呈现如下效果了：

怎样，是不是和原版一模一样，不论图片是怎样的尺寸都能自适应地完成布局。还有一个小思考，比如现在的布局已经非常好看了，如果多渲染一张图片，浏览器会怎么处理呢，如何从成千上万的图库中自动选择十几张图片，是选十三张还是十四张，还是自动根据具体布局情况来，这些都需要开发者细细琢磨。

四、学习分享

Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

关于flex的编程小游戏： Games | Coding Fantasy

自学小练习：使用flex布局实现骰子的六个面