Flexbox不均勻間距

我試圖在flexbox行的2 div上得到50％（或者真的接近）的寬度，但看起來內容會使寬度不均勻。Flexbox不均勻間距

我在這裏已經一個普拉克：https://plnkr.co/edit/RXor5bOR2s0hpa0jqjb8

.input-group { 
 
    flex: 1 0 auto; 
 
    display: flex; 
 
} 
 
.input-group-row { 
 
    flex-direction: row; 
 
} 
 
.input-group-column { 
 
    flex-direction: column; 
 
} 
 
.input-group > label { 
 
    flex-grow: 1; 
 
} 
 
.input-group > label + * { 
 
    flex-grow: 2; 
 
}

<div style="display: flex; align-items: stretch; flex: 1 0 100%;"> 
 
    <div class="input-group input-group-row"> 
 
    <label for="price">Purchase Price:</label> 
 
    </div> 
 
    <div class="input-group input-group-row"> 
 
    <label for="dealDate">Date:</label><span>2016-02-25asdfasdf</span> 
 
    </div> 
 
</div>

來源

2016-05-09 Jacob Roberts

你只需要使用flex: 1上.input-group，使他們平等width

.row { 
 
    display: flex; 
 
} 
 

 
.input-group { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid black; 
 
}

<div class="row"> 
 
    <div class="input-group input-group-row"> 
 
    <label for="price">Purchase Price:</label><span>$132.42</span> 
 
    </div> 
 
    <div class="input-group input-group-row"> 
 
    <label for="dealDate">Date:</label><span>2016-02-25</span> 
 
    </div> 
 
</div>

來源

2016-05-09 20:05:03

設置柔性基礎上50％的修復該問題：

.input-group { 
    flex: 1 0 50%; 
    display: flex; 
}

plnkr

來源

2016-05-09 20:07:17 maioman

Flexbox不均勻間距

回答

相關問題