Clever Geek Handbook

Flexbox question about content center rationale

Me and flexbox are trying to get to know each other better, but we can't see the eyes at the moment. The reason for this is because I am trying to fold three elements on one line and two on the second line. But for some reason, the elements in the second row are centered rather than starting from the left side of the main axis, making their way to the right. Which gives the site a weird look, because the alignment of the elements aren't.

My test site where all the code is available www.mnrb.dk/mdg

What is my purpose (photography)

enter image description here

What my code looks like (small block)

.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>
Run codeHide result


Hopefully someone will tell me what I am doing wrong / send me in the right direction.

+3


source to share


2 answers


Just change:

justify-content: flex-start;


for image  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>
Run codeHide result


0


source


Try this SCSS combination. It left the last elements of the line to align with justify-content: space-between, but I think it might help you.

@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;
    }
  }
}

This is the codepen link: http://codepen.io/diana_aceves/pen/KVGNZg



You just need to set the width of the items in percentage and the number of columns.

Hope this helps you.

0


source






More articles:


All Articles