CSS flex增长不适用于顶部添加的div

Question

考虑以下小提琴：https://jsfiddle.net/7naxprzd/1/

要求是：

• 包含标题和内容的两列
• 列顶部应对齐
• 列的底部应该对齐
• 在每列的顶部应该有一个水平居中的箭头

如果通过删除template<typename T> std::vector<T> selection_sort(std::vector<T> _item) { for(auto it = _item.begin(); it != _item.end(); ++it) { auto smallest = std::min_element(it, _item.end()); std::iter_swap(it, smallest); } return _item; } 类div来消除箭头，代码工作正常，但我需要箭头。

解决方案可能是绝对定位箭头，但是有没有办法用flex来解决这个布局问题而没有绝对定位箭头？

适用于现代浏览器和IE11。

＆＃13;

＆＃13;

.arrow-wrapper

＆＃13;

.row-wrapper {
  display: flex;
}

.col-wrapper-outer {
  display: flex;
  flex-wrap: wrap;
}

.arrow-wrapper {
  width: 100%;
  text-align: center;
  font-size: 30px;
}

.col-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  color: white;
}

.col-wrapper .header {
  background: blue;
}

.col-wrapper .contents {
  flex: 1 0 auto;
  background: green;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

在您的班级col-wrapper-outer的div中，而不是：

.col-wrapper-outer {
  display: flex;
  flex-wrap: wrap;
}

使用此：

.col-wrapper-outer {
  display: flex;
  flex-direction: column;
}

然后将flex: 1添加到.col-wrapper，以便它占据容器的整个高度。

revised fiddle

.row-wrapper {
  display: flex;
}

.col-wrapper-outer {
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;    /* NEW */
}

.arrow-wrapper {
  width: 100%;
  text-align: center;
  font-size: 30px;
}

.col-wrapper {
  flex: 1;                   /* NEW */
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  color: white;
}

.col-wrapper .header {
  background: blue;
}

.col-wrapper .contents {
  flex: 1 0 auto;
  background: green;
}

<div class="row-wrapper">
  <div class="col-wrapper-outer">
    <div class="arrow-wrapper">
      &darr;
    </div>
    <div class="col-wrapper">
      <div class="header">Please align tops.</div>
      <div class="contents">Let me grow.</div>
    </div>
  </div>
  <div class="col-wrapper-outer">
    <div class="arrow-wrapper">
      &darr;
    </div>
    <div class="col-wrapper">
      <div class="header">please align tops.</div>
      <div class="contents">Let me grow.
        <br>Please
        <br>align
        <br>bottoms.</div>
    </div>
  </div>
</div>