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布局实现骰子的六个面