I've been putting together a block that will display latest posts from WordPress in a grid (Twitter Bootstrap) and I decided to 'play' with flexbox for the first time.
I'm getting my head around it slowly, but I'm finding that Chrome and Safari display things differently.
Am I missing something?
HTML
<div class="col-xs-12 forcontent element-contents element-latest-posts" role="document">
<div class="content row">
<div class="latest-posts ">
<div class="row">
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/yet-another-test-post/">Yet another test post</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/yet-another-test-post/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/05/180H.jpg" class="attachment-post-thumbnail wp-post-image" alt="180H"> </a>
</section>
<section class="entry-summary">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non me</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-10-16T14:03:00+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="16th October, 2015"><i class="fa fa-clock-o"></i> Posted 23 mins ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/yet-another-test-post/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/another-test-post/">Another Test Post</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/another-test-post/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/05/188H.jpg" class="attachment-post-thumbnail wp-post-image" alt="188H"> </a>
</section>
<section class="entry-summary">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-10-16T14:02:29+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="16th October, 2015"><i class="fa fa-clock-o"></i> Posted 24 mins ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/another-test-post/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/a-large-post/">A large Post</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/a-large-post/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/04/slide-3.jpg" class="attachment-post-thumbnail wp-post-image" alt="slide-3"> </a>
</section>
<section class="entry-summary">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-05-21T13:16:54+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="21st May, 2015"><i class="fa fa-clock-o"></i> Posted 5 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/a-large-post/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/test/">test</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/test/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/05/168H.jpg" class="attachment-post-thumbnail wp-post-image" alt="168H"> </a>
</section>
<section class="entry-summary">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-05-21T13:14:06+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="21st May, 2015"><i class="fa fa-clock-o"></i> Posted 5 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/test/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
<article class="col-xs-12 col-md-4">
<header>
<h2 class="entry-title"><a href="/stc/holidays/uncategorized/hello-world/">Hello world!</a></h2>
</header>
<section class="featured-image">
<a href="/stc/holidays/uncategorized/hello-world/" class="featured-image-link">
<img src="/stc/wp-content/uploads/2015/04/slide-6.jpg" class="attachment-post-thumbnail wp-post-image" alt="slide-6"> </a>
</section>
<section class="entry-summary">
<p>Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit ali</p> </section>
<footer>
<p class="byline author vcard"><time class="updated" datetime="2015-03-19T14:48:48+00:00" title="" data-toggle="tooltip" data-placement="right" data-original-title="19th March, 2015"><i class="fa fa-clock-o"></i> Posted 7 months ago</time> - By <a href="//localhost:3000/stc/holidays/author/c9admin/" rel="author" class="fn">Ash</a></p>
<a href="/stc/holidays/uncategorized/hello-world/" class="btn btn-default btn-block featured-image-link">
Continued </a>
</footer>
</article>
</div>
LESS
.element-latest-posts {
.latest-posts .row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
article {
flex: 0 auto;
// flex: 1 auto;
margin-bottom: 15px;
&:first-of-type {
flex: 1 auto;
}
&:last-of-type {
flex: 0 auto;
}
display: flex;
flex-flow: column;
justify-content: flex-start;
section {
flex: 1 auto;
&.featured-image {
// display: none;
a {
display: block;
&:hover {
transform: scale(0.8);
outline-width: 0 !important;
}
img { max-width: 100%; }
}
}
&.entry-summary {
display: flex;
flex-flow: column;
justify-content: center;
&.no-featured-image {}
span {
flex: 1 auto;
}
}
}
footer {
a {
&.btn {
&:hover { border-color: transparent; }
}
}
}
}
}
Screen Shots
Any ideas why this is?
Thanks