既然用了这个靠左对齐,就来谈一下
//正常靠左对齐方式,直接用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的区别
- 布局不同:Flex布局是单一方向上的布局,只能水平布局或垂直布局,而grid是双向的,既能水平也能垂直
- 元素的排列不同:flex是按着一定的顺序来进行排列的,grid可以指定排列顺序
- 元素大小控制不同:flex中的元素大小是根据内容决定的,grid可以通过指定行和列的大小来决定
简单讲就是需求不同,用法也不同,flex布局虽然是单一的,但能进行响应式布局,grid是双向的,能实现复杂的网格布局
这里不推荐使用grid布局,因为grid支持高版本浏览器,其次在布局的时候不灵活,用他写写移动端就知道了,flex虽然是单一的,但是他的灵活性和兼容性好,不会出现奇奇古怪的问题,出现问题flex调试起来也方便