搜索
您的当前位置:首页正文

详解解决flex布局的justi...

来源:爱够旅游网
详解解决flex布局的justi...

在设置display:flex,justify-content: space-betweend的时候,它会把⼦元素靠边对齐平均分剩余的空间。例如:打算⼀⾏放三个⼦元素

效果:

这看起来⼀点问题都没有,还挺好看的,但是如果下⼀⾏不够三个呢,只有两个的时候就会出现问题。

这样看起来特别恶⼼,中间空了⼀⼤块出来,看起来特别像⼀个bug,⽽不是我们要的跟上⼀⾏⼀个⼀个对齐的效果。现在来解决这个问题,在这⾥提供两个⽅法:

伪类:after提供占位元素伪类⽅案

占位元素⽅案

效果

以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。

因篇幅问题不能全部显示,请点此查看更多更全内容

Top