html - CSS:使用 flexbox 来构造内容

Question

我想创建如下图所示的布局。它包括:

• 左边部分
• 右边部分
• 标题拉伸(stretch)整行

我可以像这样构造 html 并使用一些布局，例如 Flexbox、div 定位 ...

<div class="wrapper">
  <div class="status">
    <div class="left">12/05/2015</div>
    <div class="right>Adventure Story</div>
  </div>
  <div class="title">A long story about the Atlantic</div>
</div>

我刚刚学习 Flexbox，我想简化为这个 html(第一行没有包装器)

<div class="wrapper">
      <div class="left">12/05/2015</div>
      <div class="right>Adventure Story</div>
      <div class="title">A long story about the Atlantic</div>
</div>

我可以将 Flexbox 用于上述 html 结构吗？如果是，请告诉我怎么做。

Answer 1

你可以简单地这样做:

.wrapper {
  display: flex;
  flex-wrap: wrap; /* to avoid overflow and force title going to new line */
}

.left,
.right {
  flex: 0 0 50%; /*each element will take 50% of the width */
}

.right {
  text-align: right;
}

.title {
  flex: 0 0 100%; /*this element will take 100% of the width*/
}

div {
  border: 1px solid red;
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="left">12/05/2015</div>
  <div class="right">Adventure Story</div>
  <div class="title">A long story about the Atlantic</div>
</div>