盒模型--flex布局，指定几个div平均占据一行，超出的则左对齐

这种布局在面试过程中经常会被问到，所以我做个记录，提醒自己。
首先看一下效果图：

看这个布局其实考察了两个方面，首先就是盒模型，然后就是css的伪类。
下面看一下代码：

	<style>
		.mall-sell {
		    display: flex;
		    flex-flow: row wrap;
		    justify-content: space-between;
		    align-items: center;
		}
		.mall_sell-item {
		    width: 32%;
		    height: auto;
			text-align: center;
		}
		img {
		    width: inherit;
		    height: auto;
		}
		/* //使用after伪元素占位， 保证最后一行靠左对齐 */
		.mall-sell::after{ 
		    content: "";
		    height: 0;
		    width: 32%;
		}
	</style>

			<div class="mall-sell item-box">                
		        <div class="mall_sell-item">
					<img src="1.png">
		            <p>Hello</p>
		        </div>
		        <div class="mall_sell-item">
					<img src="1.png">
		            <p>Hello</p>
		        </div>    
		        <div class="mall_sell-item">
					<img src="1.png">
		            <p>Hello</p>
		        </div>    
		        <div class="mall_sell-item">
					<img src="1.png">
		            <p>Hello</p>
		        </div>    
		        <div class="mall_sell-item">
					<img src="1.png">
		            <p>Hello</p>
		        </div>        
		        <div class="mall_sell-item">
					<img src="1.png">
		            <p>Hello</p>
		        </div>    
		        <div class="mall_sell-item">
					<img src="1.png">
		            <p>Hello</p>
		        </div>    
		        <div class="mall_sell-item">
		        	<img src="1.png">
		            <p>Hello</p>
		        </div>                            
		    </div>

基础很重要，作为前端人员，页面就相当于脸面，美不美观就看你技术过不过关，不浮躁，好好学习，温故而知新。