Question

我试图在flexbox行中的2个div上获得50％（或非常接近）的宽度，但看起来内容使得宽度不均匀。

我在这里有一个问题：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>

Answer 1

您只需在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>

Answer 2

将flex-basis设置为50％可解决问题：

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

plnkr

Flexbox不均匀间距

2 个答案: