JSFiddle
- <ul>
- <li></li>
- ....
- ul{
- list-style-type: none;
- display: flex;
- flex-wrap: wrap;
- background: gold;
- }
- li{
- flex-basis: 25%;
- background:grey;
- }
现在我想在我的li元素之间留一些空格,添加边距或填充将元素推到下一行(当我有超过4个元素时,我想要flex包装).@H_502_3@
我知道上面的内容可以通过框大小来解决,但我的主要问题是我想要元素之间的间距,但是第一个和最后一个元素排列在父元素的左侧和右侧.@H_502_3@
怎么能实现这一目标？@H_502_3@
例如.@H_502_3@
- |li|spacing|li|spacing|li|spacing|li|
解决方法
检查一下 – 我使用calc来调整flex-basis以允许你可以为ul分配的自定义边距(使用的justify-content：space-between用于分配该边距).
- ul {
- list-style-type: none;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- background: gold;
- margin: 10px;
- padding: 0;
- height: 100px;
- }
- li {
- flex-basis: calc(25% - 20px);
- background: grey;
- }
- <ul>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
请告诉我您对此的反馈.谢谢！@H_502_3@
