flex布局的最后一行布局的问题

[JesseZhao1990]

当使用flex布局的时候，justify-content设置为space-between, 如果最后一行的item不够的时候，最后一行的排列从视觉上来说，和其他row会不一样。具体的表现：
https://codepen.io/zhaojianxin/pen/oqZVve?editors=1100#0

如何解决这个问题？方法一般有三个。
1.最后一行比其他行少的item，用空的item补齐
2.换成grid布局：https://codepen.io/zhaojianxin/pen/mxWvBM?editors=1100

[JesseZhao1990]

复习flex

flex为flexible box的简称，翻译过来就叫弹性布局，用来给盒装模型提供最大的灵活性

flex的使用可以分为两块，将父元素设置为flex，子元素将自动变为flex item。下面我们分别回顾容器元素和子元素的相关属性

1. 容器的属性

• display：flex
• flex-direction: row | row-reverse | column | column-reverse 默认值为row
• flex-wrap: wrap | nowrap | wrap-reverse 默认值为nowrap
• flex-flow: || ; flex-flow 是flex-direction和flex-wrap的简写
• justify-content: flex-start | center | flex-end | space-between | space-around
• align-items: flex-start | center | flex-end | stretch | baseline
• align-content： flex-start | center | flex-end | space-between | space-around

2. 项目的属性

• order 定义项目的排列顺序，数字越小。项目越靠前。默认为0
• flex-grow 定义项目的放大比例。默认为0. 即如果存在剩余空间，也不放大
• flex-shrink 定义项目的缩小比例。默认为1，如果项目空间不够。则缩小此项目
• flex-basis 定义项目占据的主轴空间，浏览器根据此属性。来计算剩余空间。默认为auto。即项目本身所占的空间的大小
• flex : none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
• align-self: auto | flex-start | center | flex-end | stretch | baseline 默认为auto。align-self可以允许项目有自己的对齐方式。覆盖容器的align-items属性。