html - 为什么 col break 元素占用 flexbox 中的空间

Question

我有以下片段。它在一行中显示 4 列。当您单击任何顶部按钮时，脚本将根据单击的按钮添加一个新的 <div class="break-row" /> 元素，这会将列分成新行。这里的问题是 .break-row 元素即使在其高度为 0px 时也会占用垂直空间。我认为在这种情况下，.col 元素应该填满垂直可用空间。

我的目标是移除灰色的空白区域，并且 .col 元素将自己拉伸(stretch)到该区域。该灰色区域的解释是什么？我该如何摆脱它？

$('a').on('click', function(e) {
  e.preventDefault();
  $('.break-row').remove();

  var breakAfter = $(this).data('breakafter');
  if (breakAfter > 0) {
    $('<div class="break-row" />').insertAfter('.col:nth-child(' + breakAfter + 'n)');
  }


});

.row {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  background: #222;
  width: 500px;
  height: 500px;
}

.col {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
}

.break-row {
  width: 100%;
  flex: 0 0 auto;
  height: 0px;
}

a {
  background: #456;
  padding: 10px;
  border-radius: 5px;
  margin: 10px;
  display: inline-block;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" data-breakafter="1">
Break after every col
</a>
<a href="#" data-breakafter="2">
Break after every 2 col
</a>
<a href="#" data-breakafter="3">
Break after every  3 col
</a>
<a href="#" data-breakafter="0">
No break
</a>

<div class="row">
  <div class="col" style="background:#0f0;width:10%;">
    aaa
  </div>
  <div class="col" style="background:#f00;width:40%;">
    bbb
  </div>
  <div class="col" style="background:#0f0;width:30%;">
    ccc
  </div>
  <div class="col" style="background:#f00;width:20%;">
    ddd
  </div>
</div>

Answer 1

这应该可以解决您的用例，我向 cols 添加了 50% 的最小高度，解决了所有情况下的问题，除了每个之后都有一个中断，所以在那种情况下我添加了一个类到行并将列的最小高度更改为 25%。

更新的 JS

$('a').on('click', function(e) {
  e.preventDefault();
  $('.break-row').remove();
  $('.row').removeClass('always-break')

  var breakAfter = $(this).data('breakafter');
  if (breakAfter > 0) {
    $('<div class="break-row" />').insertAfter('.col:nth-child(' + breakAfter + 'n)');

    if (breakAfter === 1) {
       $('.row').addClass('always-break')
    }
  }


});

更新的 CSS

.row {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  background: #222;
  width: 500px;
  height: 500px;
}

.col {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  min-height: 50%;
}

.row.always-break .col{
    min-height: 25%;
}

.break-row {
  width: 100%;
  flex: 0 0 auto;
  height: 0px;
}

a {
  background: #456;
  padding: 10px;
  border-radius: 5px;
  margin: 10px;
  display: inline-block;
  color: #fff;
}