css - display:flex 中 justify-content: space-between方法的排版问题

问题描述

问 题

针对此属性 justify-content: space-between 3个元素为一行排列，最后多余的两个多余的元素如何让它靠左排布，事实上是左右排布了，表面看就是中间空了个元素，请看demo<div class="container">

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span></div>

.container {width: 400px;display:flex;justify-content: space-between;flex-flow: row wrap;}

span {width: 110px;background-color: #f60;border-radius: 5px;margin-top: 10px;padding: 10px;
}

这个其实是此属性应有的效果 但是我想做到span按照顺序排下去，请问如何修改

解决方案

.container::after {
  content: "";
  width: 130px;
}

这篇关于css - display:flex 中 justify-content: space-between方法的排版问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！