使用flexbox时，多行子元素之间的间距如何控制？_Html5_论坛

使用flexbox时，多行子元素之间的间距如何控制？

mo***id 分类：Html5 人气：3594 回帖：4 发布于6年前收藏

html结构

    <div class="flex flex-sm">
        <div class="flex-item item1"></div>
        <div class="flex-item item2"></div>
        <div class="flex-item item3"></div>
        <div class="flex-item item4"></div>
    </div>

css代码

.flex{
    padding:20px;
    border:1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: space-between;
}
.flex-item{
    width: 250px;
    border:1px solid #f00;
}
.item4{
    height: 200px;
}
.item1{
    height: 120px;
}
.item2{
    height:100px;
}
.item3{
    height: 40px;
}

未换行时浏览器显示如下：

换行时显示效果

请问换行时能否调节横轴间距呢？尝试过使用margin，效果不好会破坏布局。

标签：css html html5 javascript

讨论这个帖子（4）垃圾回帖将一律封号处理……

Lv4 码徒

se***ng 技术总监 6年前#1

你可以item外面再套一层div 然后再用flex！

Lv5 码农

ha***00 UI设计师 6年前#2

改了下安坚实的答案。用margin auto,拷贝到https://jsfiddle.net/,代码如下
<div class="wrap">

<div class="flex">
    <div class="flex-item item1"></div>
    <div class="flex-item item2"></div>
    <div class="flex-item item3"></div>
    <div class="flex-item item4"></div>
</div>

</div>
<div>other</div>

.wrap {
border:1px solid #ccc;
padding: 20px;
}
.flex{
width:800;

height:400px;
display: flex;
flex-flow:row wrap;

}
.flex-item{

width: 250px;
border:1px solid #f00;
margin:auto;

}
.item1{ height: 20px; }
.item2{ height:100px; }
.item3{ height: 40px; }
.item4{ height: 200px; }

Lv6 码匠

on***de JAVA开发工程师 6年前#3

2016-07-06 19:34 update

https://jsfiddle.net/anjianshi/4gk6eke9/

<div class="wrap">
    <div class="flex">
        <div class="flex-item item1"></div>
        <div class="flex-item item2"></div>
        <div class="flex-item item3"></div>
        <div class="flex-item item4"></div>
    </div>  
</div>
<div>other</div>

.wrap {
  border:1px solid #ccc;
  padding: 20px;
}
.flex{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: space-between;
    
    margin-bottom: -50px;  /* 注意 */
}
.flex-item{
    width: 250px;
    border:1px solid #f00;
    margin-bottom: 50px;    /* 注意 */
}
.item1{ height: 20px; }
.item2{ height:100px; }
.item3{ height: 40px; }
.item4{ height: 200px; }

给 .flex-item 设置 margin-bottom，
然后给容器（.flex）设置负的 margin-bottom 来把最下面一行多余的 margin 给抵消。
这样就行了。

Lv6 码匠

貪***续 PHP开发工程师 6年前#4

给父元素不同高度，使用align-item space-around

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取