I am trying to achieve and Masonry like layout with flexbox only.
i figured i would need to use a mix of columns and rows, but what i cant achieve is that the elements will all have the same distance (like stacked) below and above each other, as well as the second element in the first row wont align towards the first...is it even possible to achieve it without js? Thanks a lot
**
UPDATE:
**
I managed to pull the middle and right column up in the second row, so its just the second element that needs to be aligned with the middle column....so i guess js is not really neded
http://codepen.io/HendrikEng/pen/PpzYqM?editors=1100
This is how it should look:
HTML
<section>
<div class="c-team-tiles">
<div class="c-team-row">
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x590" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/590x390" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
</div>
<div class="c-team-row">
<div class="c-team-column">
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x330" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x590" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x590" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x590" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
</div>
<div class="c-team-column">
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x590" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x330" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x420" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x330" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x330" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
</div>
<div class="c-team-column">
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x450" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x330" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x590" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x330" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
<figure class="c-team-tile">
<div class="u-margin-bottom c-team-tile__img">
<img src="http://placehold.it/390x450" alt="">
</div>
<figcaption class="c-image-tile__cpt">
<h4 class="u-margin-bottom-tiny">Name</h4>
<p class="u-margin-bottom-tiny">Position</p>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
CSS
* {
margin: 0;
padding: 0;
}
.c-team-row {
align-content: stretch;
align-items: stretch;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.c-team-coumn {
align-content: stretch;
align-items: stretch;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
.c-team-tile {
align-self: auto;
flex: 0 1 auto;
order: 0;
}
