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

Question

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

我的目标是移除灰色的空白区域,并将.col元素拉伸到该区域.这个灰色区域的解释是什么？如何摆脱它？

$('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

这应该可以满足您的用例，我向列添加了 50% 的最小高度，解决了所有情况下的问题，除了每个之后都有一个中断，所以在这种情况下，我向row 并将列的最小高度更改为 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;
}