您现在的位置是：网站首页> 编程资料编程资料

解决flex布局space-between最后一行左对齐的方法flex弹性盒布局最后一行左对齐的实现思路css3 flex布局 justify-content:space-between 最后一行左对齐让CSS flex布局最后一行列表左对齐的N种方法(小结)

2023-10-17 415人已围观

简介这篇文章主要介绍了解决flex布局space-between最后一行左对齐的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

首先看代码和效果↓

可以看到最后一个div并没有在中间，而是在最后了

因为我们设置了justify-content为space-between，意思就是两边贴边

这时候我们可以给最外层div设置个伪元素，宽度和里面的div宽度一样就好了

只需要两行css就可以

 .main:after { content: ""; width: 100px; }

这时候看效果

其实原理就是最后一个伪元素把他挤过来了

就算有9个也没影响，因为他的高度是0，看下图↓

到此这篇关于解决flex布局space-between最后一行左对齐的方法的文章就介绍到这了,更多相关flex布局space-between左对齐内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：使用css写带纹理渐变背景图的示例代码使用CSS cross-fade()实现背景图像半透明效果的示例代码完美解决webpack打包css背景图片路径问题CSS3为背景图设置遮罩并解决遮罩样式继承问题CSS设置div背景图的实现代码CSS背景图片设置的6个有趣的技巧CSS3 实现响应鼠标移动背景图片漂移效果的用户介绍卡片源码

下一篇：flex布局实现无缝滚动的示例代码flex布局实现每行固定数量+自适应布局浅谈Flex布局与缩放比例计算详解flex布局中保持内容不超出容器的解决办法深入浅析CSS3中的Flex布局整理css3 flex实现div内容水平垂直居中的几种方法详解CSS中的flex布局css用Flex布局制作简易柱状图的实现flex布局兼容性问题小结css3 flex布局 justify-content:space-between 最后一行左对齐详解flex布局中flex-grow与flex-shrink的计算方式

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网