您当前的位置:主页 > 新跑狗报 > 正文

让CSS flex布局最后一行列表左对齐的N种方法

2019-09-16 17:21  作者:admin 点击:次 

  但是,如果最后一行的列表的个数不满,则就会出现最后一行没有完全垂直对齐的问题。

  由于每一列的数目都是固定的,因此,我们可以计算出不同个数列表应当多大的margin值才能保证完全左对齐。

  例如,假设每行4个元素,结果最后一行只有3个元素,则最后一个元素的margin-right大小是“列表宽度+间隙大小”的线个元素也是可以完美左对齐的。

  然后,借助树结构伪类数量匹配技术(这篇文章“伪类匹配列表数目实现微信群头像CSS布局的技巧”中的布局技巧就是借助这种技术实现),我们可以知道最后一行有几个元素。

  眼见为实,您可以狠狠地点击这里:动态匹配数量实现flex子项左对齐demo

  有时候,每一个flex子项的宽度都是不固定的,这个时候希望最后一行左对齐该如何实现呢?

  由于此时间隙的大小不固定,江西九江阿玛尼一周年rnb现场 dj。对齐不严格,因此,我们可以直接让最后一行左对齐即可。具体方法有两个:

  这两个方法我合在一个demo页面了,由于2017年部分纸张产品生产总...,您可以狠狠的点击这里:flex子元素宽度不固定最后一行左对齐demo

  如果每一行的列数不固定,则上面的这些方法均不适用,需要使用其他技巧来实现最后一行左对齐。

  这个方法其实很简单,也很好理解,就是使用足够的空白标签进行填充占位,具体的占位数量是由最多列数的个数决定的,例如这个布局最多7列,那我们可以使用7个空白标签进行填充占位,最多10列,那我们需要使用10个空白标签。

  相关CSS如下,实现的关键就是占位的i元素宽度和margin大小设置得和.list列表元素一样即可,其他样式都不需要写。

  由于i元素高度为0,因此,并不会影响垂直方向上的布局呈现。

  您可以狠狠地点击这里:使用空白元素占位让flex布局最后一行左对齐demo

  然而有时候,由于客观原因,前端重构人员没有办法去调整html结构,同时布局的列表个数又不固定,这个时候该如何实现我们最后一行左对齐效果呢?

  Grid布局天然有gap间隙,且天然格子对齐排布,因此,实现最后一行左对齐可以认为是天生的效果。

  首先最后一行需要左对齐的布局更适合使用CSS grid布局实现,但是,repeat函数兼容性有些要求,IE浏览器并不支持。如果项目需要兼容IE,则此方法需要斟酌。

  然后,适用范围最广的方法是使用空的元素进行占位,此方法不仅适用于列表个数不固定的场景,对于列表个数固定的场景也可以使用这个方法。但是有些人代码洁癖,看不惯这种空的占位的html标签,则可以试试一开始的两个方法,一是动态计算margin,模拟两端对齐,另外一个是根据列表的个数,动态控制最后一个列表元素的margin值实现左对齐。

  累计6种方法,各有各的优缺点,大家根据自己项目的实际场景,选择合适的方法。

  感谢您的阅读,如果您觉得本文内容还不错,欢迎分享给你的小伙伴们!返回搜狐,查看更多

更多相关内容