CSS：将flexbox用于结构内容

Question

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

• 左侧部分
• 右侧部分
• 标题拉伸整行

我可以像这样结构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>

Answer 2

您可以在flex-container上使用flex-wrap: wrap，在flex: 0 0 100%元素上使用title，以便它在第二个元素上转到新行和margin-left: auto，以便将其定位到右边。

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.title {
  flex: 0 0 100%;
}
.right {
  margin-left: auto;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;