关于Flex布局换行后靠左对齐的方式

既然用了这个靠左对齐，就来谈一下

	//正常靠左对齐方式，直接用text属性就好
	text-align:left
	//Flex布局靠左对齐
	//1.宽度不固定，最后一个元素左对齐(这样只能让最后一个元素左对齐，但凡在多一个元素就不行)
	ul li:last-child{
	margin-right:auto
	//2.使用伪元素
	//让父元素先display:flex,然后再使用justify-content: space-between
	//两端对齐中间平均分配，其他的几个属性我试着不行，例如around、evenly,
	//在伪元素中把flex属性设置为1，网上说的设置为auto或者1,auto我跑不通
	.text:after{
		content:'';
		flex:1
	}
	//3.html不能修改的情况下直接使用css中的grid布局
	.text{
		display:grid;
		justify-content: space-between;
		grid-template-columns:repeat(auto-fill,100px)
	}
	
	
}
	

既然谈到了grid,正好说说他和flex的区别

1. 布局不同：Flex布局是单一方向上的布局，只能水平布局或垂直布局，而grid是双向的，既能水平也能垂直
2. 元素的排列不同：flex是按着一定的顺序来进行排列的，grid可以指定排列顺序
3. 元素大小控制不同：flex中的元素大小是根据内容决定的，grid可以通过指定行和列的大小来决定
   简单讲就是需求不同，用法也不同，flex布局虽然是单一的，但能进行响应式布局，grid是双向的，能实现复杂的网格布局

这里不推荐使用grid布局，因为grid支持高版本浏览器，其次在布局的时候不灵活，用他写写移动端就知道了，flex虽然是单一的，但是他的灵活性和兼容性好，不会出现奇奇古怪的问题，出现问题flex调试起来也方便