Flexbox Layout

Blog-style news with flexbox layout..

by Marc Malignan

HTML

<ul class="flex"></ul>

CSS

.flex {
    width: 490px;
    margin: 0 auto;
    padding: 5px;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-family: arial;
    background: #eee;
    box-sizing: border-box;
    border-radius: 3px;
}

@media(min-width:700px){
    .flex { width: 650px; }
}
@media(min-width:860px){
    .flex { width: 810px; }
}

.article {
    color: #fff;
    width: 150px;
    height: 150px;
    line-height: 20px;
    margin: 5px;
    padding: 10px 10px 0 10px;
    list-style: none;
    background: silver;
    border-radius: 3px;
    border-bottom: 10px solid;
    border-color: rgb(160,160,160);
    box-sizing: border-box;
    transition: height .5s;
    cursor: pointer;
    overflow: hidden;
}

.article.read {
    height: 310px;
}

.article.important {
    width: 310px;
    background: tomato;
    border-color: firebrick;
}

.article-title {
    font-weight: bold;
    text-align: center;
    border-bottom: 1px dashed rgba(255,255,255,.5);
}

.article-content {
    font-size: 90%;
    margin: 5px 0;
    transition: height .5s;
}

JavaScript

var flex = $('.flex');
var html = '';

for(var i=1; i<=9; i++)
{
    html += '<li id="a' + i + '" class="article">';
    html += '<div class="article-title">News' + i + '</div>';
    html += '<div class="article-content"></div>';
    html += '</li>';
}

flex.append(html);
$('#a2').addClass('important');
$('#a6').addClass('important');
$('#a8').addClass('important');

$('.article-content').html('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu magna fermentum, commodo nisi et, cursus augue. Aenean feugiat pellentesque enim, at rutrum ipsum venenatis eu. Pellentesque feugiat felis justo, in scelerisque mi tempus vitae. Nam pulvinar rutrum mollis. Duis dapibus arcu interdum dapibus gravida. Suspendisse nec ligula tortor. In hendrerit aliquam posuere. Nam eu justo at velit pretium tristique. Sed ante erat, laoreet at mollis vel, rutrum sit amet ipsum. Fusce scelerisque lectus sapien, vel luctus mauris congue in. Nam diam nisi, tincidunt at interdum sed, ornare et sapien. Vestibulum at tortor erat. Integer ullamcorper tempus dolor a feugiat. Aenean quis vestibulum mi, ac viverra turpis.');

$('.article').click(function(){
    $(this).toggleClass('read');
});