Question

嘿，每当我使用display：flex我的行的右侧有一点空间。我该如何解决这个问题？只有当你使用Firebug或其他什么时，你才能在jsfiddle中看到它是好的。

我知道这是因为保证金，但我需要保证金..

                <div class="input-group" style="display: flex; justify-content: space-between; align-items: center;">
                <input type="text" class="tile-txt" placeholder="Box 1">
                <input type="text" class="tile-txt" placeholder="Box 2">
            </div>

Answer 1

之所以会发生这种情况，是因为您的第二个（最后一个）输入元素有一个margin-right 5px删除了它，它将符合要求： DEMO

.tile-txt:last-child{
    margin: 0 0 5px 0;
}

<强>更新

如果您有多行，则需要从其索引为偶数的元素中删除边距： DEMO

.tile-txt:nth-child(even){
    margin: 0 0 5px 0;
}

Answer 2

更灵活的方法是使用auto左边距（flex项目处理auto margins与在块格式化上下文中使用时略有不同。）

.right-part {
    margin-left: auto;
}

Updated fiddle

Flexbox右侧空间

2 个答案: