Flex：将多个项目对齐为表格答案

【问题标题】：Flex: Align multiple items as a tableFlex：将多个项目对齐为表格
【发布时间】：2015-11-11 05:03:51
【问题描述】：

尝试更好地对齐一行的某些小节。我设法使用 flex: 1; 在同一行获得“阅读更多”按钮。但是，我似乎无法将图像的顶部和第一段的开头很好地对齐。

布局是一系列的div，里面有文章：

<div class="row-X">
  <article>
    <header></header>
    <main></main>
    <footer></footer>
  </article>
</div>

这是我正在寻找的结果：http://imgur.com/XqvijDX

这就是我得到的：http://codepen.io/anon/pen/PqveNq

【问题讨论】：

网站使用的是图片，而你使用的是真实的代码，所以一行文字影响了布局？
除非两个 main 元素共享一个共同的父元素，即使 flexbox 在这里也无济于事。这不是它的工作原理。

标签： html css vertical-alignment flexbox

【解决方案1】：

codepen demo

header{
  min-height:140px;
}

在这种情况下，给标题一个最小高度。

【讨论】：

这是我对问题的最初解决方案，但最终对于标题最少的行看起来很奇怪。想也许这个问题也有一个 flexbox 解决方案..？

【解决方案2】：

看看：DEMO

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

#img-1 {
  height: 100px;
  border: 1px solid black;
  width: 100%;
}

#img-2 {
  height: 90px;
  border: 1px solid black;
  width: 100%;
}

.row-2 {
  box-sizing: border-box;
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: row;
  margin: 1rem 0;
}
.row-2 > * {
  width: 50%;
  box-sizing: border-box;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.row-2 > * main {
  flex: 1;
}

article {
  float: left;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
}

【讨论】：