flexbox justify-内容中心问题

Question

我和flexbox正在努力更好地了解，但目前我们意见不一致。这样做的原因是，我试图在一行中添加三个项目，在第二行中添加两个项目。但是由于某些原因，第二行上的项目居中，而不是从主轴的左侧开始，一直到右侧。这给了网站一个奇怪的外观，因为项目没有对齐。

我的测试站点，其中所有代码都可用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>

​

Answer 2

试试这个SCSS混入。它是用justify-content: space-between对左对齐最后一行的项目，但我认为它可以帮助你。

@mixin last-row-flexbox($num-columns, $width-items){

  $filled-space: $width-items * $num-columns;
  $margin: calc((100% - #{$filled-space}) / (#{$num-columns} - 1));

  $num-cols-1 : $num-columns - 1;

  &:nth-child(#{$num-columns}n+1):nth-last-child(-n+#{$num-cols-1}) ~ & {
    margin-left: $margin;
  }
  @for $i from 1 through $num-columns - 2 { 
    $index: $num-columns - $i;
    &:nth-child(#{$num-columns}n+#{$index}):last-child{
      margin-right: auto;
    }
  }
}

这是codepen链接：http://codepen.io/diana_aceves/pen/KVGNZg

您只需设置项目宽度的百分比和列数。

我希望这能对你有所帮助。