A flexbox model

2014-07-17

A layout tervezésre a CSS3-ban új eszközök állnak rendelkezésre. Mint a neve mutatja illetve a videóból is látszik, flexibilis, hatékony és egyszerűen használható. Sajnos a modern böngészők között is akad olyan amelyik csak részlegesen támogatja. Ahhoz, hogy élesben is biztonsággal tudjuk használni még várni kell, de addig is mindenképpen érdemes megismerkedni vele.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


<html>
<head>
    <title>Flexbox</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="jquery.js"></script>
    <script src="script.js"></script>
</head>
<body>

    <section>

        <article>
            <header>1. box</header>
            <ul>
                <li>Lorem ipsum dolor sit amet</li>
                <li>consectetur adipiscing elit</li>
                <li>Morbi viverra libero quam</li>
                <li>eu interdum quam mattis a</li>
                <li>Vivamus ipsum felis, consequat</li>
                <li class="more">non blandit id, volutpat ut justo</li>
                <li class="more">Pellentesque at dolor dolor</li>
                <li class="more">Nunc eu sapien consequat</li>
                <li class="more">tempor odio sit amet</li>
                <li class="more">egestas ligula donec molestie</li>
            </ul>
            <p class="more-items">Tovább »</p>
        </article>
        <article>
            <header>2. box</header>
            <ul>
                <li>non blandit id, volutpat ut justo tempor odio</li>
                <li>Pellentesque at dolor dolor</li>
                <li>Nunc eu sapien consequat ligula donec molestie</li>
                <li>tempor odio sit amet</li>
                <li>egestas ligula donec molestie</li>
                <li class="more">non blandit id, volutpat ut justo</li>
                <li class="more">Pellentesque at dolor dolor</li>
                <li class="more">Nunc eu sapien consequat</li>
                <li class="more">tempor odio sit amet</li>
                <li class="more">egestas ligula donec molestie</li>
            </ul>
            <p class="more-items">Tovább »</p>
        </article>
        <article>
            <header>3. box</header>
            <ul>
                <li>dictum ante et molestie</li>
                <li>aliquam pulvinar sed elit</li>
                <li>sed aliquet cras lacinia</li>
                <li>vitae tortor nec aliquam</li>
                <li>sed odio elit, ullamcorper</li>
                <li class="more">non blandit id, volutpat ut justo</li>
                <li class="more">Pellentesque at dolor dolor</li>
                <li class="more">Nunc eu sapien consequat</li>
                <li class="more">tempor odio sit amet</li>
                <li class="more">egestas ligula donec molestie</li>
            </ul>
            <p class="more-items">Tovább »</p>
        </article>
        <article>
            <header>4. box</header>
            <ul>
                <li>dictum ante et molestie</li>
                <li>aliquam pulvinar sed elit</li>
                <li>sed aliquet cras lacinia</li>
                <li class="more">non blandit id, volutpat ut justo</li>
                <li class="more">Pellentesque at dolor dolor</li>
                <li class="more">Nunc eu sapien consequat</li>
                <li class="more">tempor odio sit amet</li>
                <li class="more">egestas ligula donec molestie</li>
            </ul>
            <p class="more-items">Tovább »</p>
        </article>
        <article>
            <header>5. box</header>
            <ul>
                <li>dictum ante et molestie vitae tortor </li>
                <li>aliquam pulvinar sed elit</li>
                <li>sed aliquet cras lacinia tortor nec aliquam</li>
                <li>vitae tortor nec aliquam</li>
                <li>sed odio elit, ullamcorper sed odio elit</li>
                <li class="more">non blandit id, volutpat ut justo</li>
                <li class="more">Pellentesque at dolor dolor</li>
                <li class="more">Nunc eu sapien consequat</li>
                <li class="more">tempor odio sit amet</li>
                <li class="more">egestas ligula donec molestie</li>
            </ul>
            <p class="more-items">Tovább »</p>
        </article>

    </section>

</body>
</html>

CSS forráskód


* { padding:0;margin:0;border:0;font-family:Roboto;font-size:14px }
body {
    background: #f8f8f8;
    color: #9c9c9c;
    margin: 5px
}
section {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: space-around;
    margin: 0 auto;
}
article {
    margin: 5px;
    background: #e8e8e8;
    flex: 1 1 100px; /* flex-grow | flex-shrink | flex-basis */
}
article header {
    padding: 10px;
    background: #2eec71;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

article:nth-of-type(1) { order: 3 }
article:nth-of-type(2) { order: 2 }
article:nth-of-type(3) { order: 5 }
article:nth-of-type(4) { order: 1 }
article:nth-of-type(5) { order: 4 }

article:nth-of-type(2) header { background:#f1b14f }
article:nth-of-type(3) header { background:#514f67 }
article:nth-of-type(4) header { background:#fbca01 }
article:nth-of-type(5) header { background:#2d5d8e }

ul { padding: 0 10px }
li { list-style: none; padding: 10px 0; border-bottom: 1px solid #c9c9c9 }
li.more { display: none }

p.more-items { padding: 20px 0 10px 10px; font-style: italic; cursor: pointer }

@media all and (max-width:500px) {
    section {
        flex-flow: column wrap;
    }
    article {
        flex-basis: initial;
    }
}

jQuery forráskód


$(document).ready(function() {
    $(".more-items").click(function(){
        $(this).parent().find(".more").slideToggle();
    });
});