flex布局图片九宫格

需求：

1. 一张图片时宽度满屏，
2. 两张图片时各占一半，
3. 三张图片时一行展示3张图片，
4. 四张图片时一行展示2张图片
5. 五张~九张时一行展示3张

我第一反应是想到：浮动，或者用行内元素。

浮动跟行内元素：功能是可以实现的，我个人觉得会比较麻烦的，要自己各种算内边距图片的占比等等，还算的边距不统一。

后面灵光一闪，怎么就没有想到用flex 布局呢！！！!（被自己蠢哭了 ）

推荐可以看下阮一峰 Flex 布局教程 简单明了，通俗易懂 ，有兴趣的童鞋可以去看一下。

话不多说了，上看代码：

需求1 className：one

需求2、4 className：two

需求3、5 className：three

<div class="imgBox">
     <div :class="imgList.length === 1? 'one' : (imgList.length === 2 || imgList.length === 4)? 'two' : 'tree'"  v-for="(img,index) in imgList" :key="index"