css - flexbox 证明内容中心问题

Question

我和 flexbox 正在努力加深了解，但目前我们意见不一致。这样做的原因是我试图在一行中 flex 三个元素，在第二行中 flex 两个元素。但由于某种原因，第二行的元素居中，而不是从主轴的左侧开始，向右侧移动。这让网站看起来很奇怪，因为元素没有对齐。

我的测试站点，所有代码都可用 www.mnrb.dk/mdg

我的目标是什么(图片)

我的代码是什么样的(小块)

.flex-wrapper {
  width: 100%;
  height: 100%;

  -webkit-display: flex;
  display: flex;

  -webkit-flex-flow: row;
  flex-flow: row;

  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;

  /*Works in conjunction with flex-wrap to remove unwanted vertical "air" between the items on the cross axis*/
  -webkit-align-content: flex-start;
  align-content: flex-start;

  /*Move items on the main (horizontal) axis
  justify content is by default set to flex-start*/
  -webkit-justify-content: flex-start;
  justify-content: flex-start;

  /*Move items on the cross (vertical) axis
  By default align items is set to stretch, which stretch the item 100% either horrizontal or vertical
  depending on the flex being a row or column.*/
  -webkit-align-items: stretch;
  align-items: stretch;
}

.flex-wrapper > div {
  max-width: 400px;

  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;

  margin-top: 5px;
}

<div class="flex-wrapper">

  <div>
    <article>
      <header>
        <time datetime="2014-12-07"></time>
        <h2>Title 1</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis et lectus eget faucibus. Nunc lobortis scelerisque leo vel tincidunt. Cras magna ante, commodo ac sem pellentesque, tempus egestas mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent egestas placerat ipsum at molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac erat dignissim, imperdiet urna vel, rutrum tortor. Mauris facilisis ex eget massa molestie, sed ultricies urna efficitur. </p>
    </article>
  </div>

  <div>
    <article>
      <header>
        <time datetime="2014-12-07"></time>
        <h2>Title 2</h2>
      </header>
      <p>Suspendisse aliquet ligula nisi, eget viverra libero porttitor vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam massa sem, placerat in fermentum et, auctor varius diam. Phasellus sed sollicitudin sem, eget porta urna. Phasellus lacus diam, imperdiet non dapibus porttitor, gravida vitae odio. Pellentesque sit amet risus at risus molestie rutrum sed sit amet mauris. Donec at tortor vulputate, tempus dolor id, rutrum nulla. Vivamus cursus orci vel purus ornare blandit. </p>
    </article>
  </div>

  <div>
    <article>
      <header>
        <time datetime="2014-12-07"></time>
        <h2>Title 3</h2>
      </header>
      <p>Suspendisse aliquet ligula nisi, eget viverra libero porttitor vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam massa sem, placerat in fermentum et, auctor varius diam. Phasellus sed sollicitudin sem, eget porta urna. Phasellus lacus diam, imperdiet non dapibus porttitor, gravida vitae odio. Pellentesque sit amet risus at risus molestie rutrum sed sit amet mauris. Donec at tortor vulputate, tempus dolor id, rutrum nulla. Vivamus cursus orci vel purus ornare blandit. </p>
    </article>
  </div>

  <!--TEST-->
  <div>
    <article>
      <header>
        <time datetime="2014-12-07"></time>
        <h2>Title 4</h2>
      </header>
      <p>Suspendisse aliquet ligula nisi, eget viverra libero porttitor vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam massa sem, placerat in fermentum et, auctor varius diam. Phasellus sed sollicitudin sem, eget porta urna. Phasellus lacus diam, imperdiet non dapibus porttitor, gravida vitae odio. Pellentesque sit amet risus at risus molestie rutrum sed sit amet mauris. Donec at tortor vulputate, tempus dolor id, rutrum nulla. Vivamus cursus orci vel purus ornare blandit. </p>
    </article>
  </div>

  <div>
    <article>
      <header>
        <time datetime="2014-12-07"></time>
        <h2>Title 4</h2>
      </header>
      <p>Suspendisse aliquet ligula nisi, eget viverra libero porttitor vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam massa sem, placerat in fermentum et, auctor varius diam. Phasellus sed sollicitudin sem, eget porta urna. Phasellus lacus diam, imperdiet non dapibus porttitor, gravida vitae odio. Pellentesque sit amet risus at risus molestie rutrum sed sit amet mauris. Donec at tortor vulputate, tempus dolor id, rutrum nulla. Vivamus cursus orci vel purus ornare blandit. </p>
    </article>
  </div>
</div>

希望有人能告诉我我做错了什么/让我朝着正确的方向前进。

Answer 1

只需更改:

justify-content: flex-start;
到
justify-content: space-between;

.flex-wrapper {
  width: 100%;
  height: 100%;

  -webkit-display: flex;
  display: flex;

  -webkit-flex-flow: row;
  flex-flow: row;

  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;

  /*Works in conjunction with flex-wrap to remove unwanted vertical "air" between the items on the cross axis*/
  -webkit-align-content: flex-start;
  align-content: flex-start;


  /*Move items on the main (horizontal) axis
  justify content is by default set to flex-start*/
  -webkit-justify-content: flex-start;
  justify-content: space-between;

  /*Move items on the cross (vertical) axis
  By default align items is set to stretch, which stretch the item 100% either horrizontal or vertical
  depending on the flex being a row or column.*/
  -webkit-align-items: stretch;
  align-items: stretch;
}

.flex-wrapper > div {
  max-width: 400px;

  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;

  margin-top: 5px;
}

<div class="flex-wrapper">

  <div>
    <article>
      <header>
        <time datetime="2014-12-07"></time>
        <h2>Title 1</h2>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis et lectus eget faucibus. Nunc lobortis scelerisque leo vel tincidunt. Cras magna ante, commodo ac sem pellentesque, tempus egestas mi. Interdum et malesuada fames ac ante
        ipsum primis in faucibus. Praesent egestas placerat ipsum at molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac erat dignissim, imperdiet urna vel, rutrum tortor. Mauris facilisis ex eget massa molestie, sed ultricies urna
        efficitur.</p>
    </article>
  </div>

  <div>
    <article>
      <header>
        <time datetime="2014-12-07"></time>
        <h2>Title 2</h2>
      </header>
      <p>Suspendisse aliquet ligula nisi, eget viverra libero porttitor vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam massa sem, placerat in fermentum et, auctor varius diam. Phasellus sed
        sollicitudin sem, eget porta urna. Phasellus lacus diam, imperdiet non dapibus porttitor, gravida vitae odio. Pellentesque sit amet risus at risus molestie rutrum sed sit amet mauris. Donec at tortor vulputate, tempus dolor id, rutrum nulla. Vivamus
        cursus orci vel purus ornare blandit.</p>
    </article>
  </div>

  <div>
    <article>
      <header>
        <time datetime="2014-12-07"></time>
        <h2>Title 3</h2>
      </header>
      <p>Suspendisse aliquet ligula nisi, eget viverra libero porttitor vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam massa sem, placerat in fermentum et, auctor varius diam. Phasellus sed
        sollicitudin sem, eget porta urna. Phasellus lacus diam, imperdiet non dapibus porttitor, gravida vitae odio. Pellentesque sit amet risus at risus molestie rutrum sed sit amet mauris. Donec at tortor vulputate, tempus dolor id, rutrum nulla. Vivamus
        cursus orci vel purus ornare blandit.</p>
    </article>
  </div>

  <!--TEST-->
  <div>
    <article>
      <header>
        <time datetime="2014-12-07"></time>
        <h2>Title 4</h2>
      </header>
      <p>Suspendisse aliquet ligula nisi, eget viverra libero porttitor vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam massa sem, placerat in fermentum et, auctor varius diam. Phasellus sed
        sollicitudin sem, eget porta urna. Phasellus lacus diam, imperdiet non dapibus porttitor, gravida vitae odio. Pellentesque sit amet risus at risus molestie rutrum sed sit amet mauris. Donec at tortor vulputate, tempus dolor id, rutrum nulla. Vivamus
        cursus orci vel purus ornare blandit.</p>
    </article>
  </div>

  <div>
    <article>
      <header>
        <time datetime="2014-12-07"></time>
        <h2>Title 4</h2>
      </header>
      <p>Suspendisse aliquet ligula nisi, eget viverra libero porttitor vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam massa sem, placerat in fermentum et, auctor varius diam. Phasellus sed
        sollicitudin sem, eget porta urna. Phasellus lacus diam, imperdiet non dapibus porttitor, gravida vitae odio. Pellentesque sit amet risus at risus molestie rutrum sed sit amet mauris. Donec at tortor vulputate, tempus dolor id, rutrum nulla. Vivamus
        cursus orci vel purus ornare blandit.</p>
    </article>
  </div>
</div>