flexbox理由 - 内容中心问题

时间：2014-12-15 19:22:19

标签： css css3 flexbox

我和flexbox正试图更好地了解，但目前我们没有看到一致。这样做的原因是我试图在一行上弯曲三个项目，在第二行上弯曲两个。但由于某种原因，第二行上的项目居中，而不是从主轴的左侧开始，向右侧移动。这使得网站看起来很奇怪，因为这些项目没有对齐。

我的测试网站，其中所有代码均可用www.mnrb.dk/mdg

我的目标是什么（图片）

enter image description here

我的代码是什么样的（小块）

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

希望有人能告诉我我做错了什么/给我正确的方向。

2 个答案:

答案 0 :(得分：0)

只需更改：

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

试试这个SCSS mixin。这是为了将最后一行的项目与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

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

我希望这可以帮到你。

相关问题
最新问题