响应式flex布局多行多列排版，正文左右对齐，完整方法！

网站建设时，用响应式布局简单方便，很多人采用display:flex布局，但遇到多行多列，同一行块之间预留间距等问题，通常做法是父容器：

. box{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;}
.box .item{height:100px;background:#d00;margin-bottom:2%;flex:0 0 23%;}

这样的方法去实现，但会遇到最后一行不满列的情况如下图所示：

最后一行元素不满时，中间出现空白；这样就不美观了，现采用justify-content:flex-start;即采用默认值；这时就会展现如下：

排列是正常了，但左右两边留有补白，当图像区域比较大时就不美观了，像实现如下图效果：左右边如正文对齐，且在自适应状态下便于调整代码。

实现上面的效果有两套方法：

方法一：

在父容器中加入一个子容器如innerbox，布局块若设置间距为10px，这里以 li为例，则子容器如innerbox应加大到20px，超出隐藏（父级container加overflow:hidden;），而主体部放在li > a标签中。改变Li宽度即可实现一行排列多个，且可实现一行放1个li，2个li，3个li，4个li，5个li等。

自适应时仅需改变li属性width即可。代码如下：

实现如图效果：

 

自适应改写非常方便，只需要在不同屏幕下多写几句css，将li的width值改写为100%，50%，33.33%，25%即可。

方法二：

标签li采用margin进行补白，现对常见一行排2个，3个，4个进行代码改写。核心部分就是利用css属性nth-of-type对其后一个li，margin-right设置为0；另外需要注意的是li的宽度width和margin-right的值需要设置合理的值，保证最后同一行所有li之width+左右margin值=100%
同一行最后一个li margin设置方法：采用nth-of-type(2n)  nth-of-type(3n) nth-of-type(4n)设置2的倍数，3的倍数，4的倍数li右边margin-right为0；

实现效果：

注意一下css代码中的flex写法及数值，以及margin-right的数值设置即可实现不同屏幕下，响应式布局的改写了，不同屏幕的css非常容易，这里就不赘述了。

希望这段总结能帮助到经常自适应网站建设的朋友，特别是产品排版及需要图文排版的地方。

具体可以参考：https://download.csdn.net/download/weasle/88717561?spm=1001.2014.3001.5503