Flexbox Layout

by cesar iduarte

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Layout</title>
        <link rel="stylesheet" href="../src/layout.css" />
    </head>
    <body>
        <div class="smpl-container smpl-container--with-header">
            <header class="smpl-header">
                Simple Layout Sample
            </header>
            <section class="smpl-content smpl-container smpl-container--with-sidebar">
                <div class="smp-sidebar">
                    <ul>
                        <li>Menu 1</li>
                        <li>Menu 2</li>
                        <li>Menu 3</li>
                        <li>Menu 4</li>
                    </ul>
                </div>
                <div class="smpl-content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis tortor nibh. Nullam at molestie mi, sed luctus sem. Nullam in porta lectus, vitae porta arcu. Quisque ut nulla nisl. Phasellus at orci sit amet ipsum gravida ullamcorper. Maecenas maximus luctus est et pretium. Donec consequat sed tellus eget aliquam.

Donec faucibus porttitor nibh, quis gravida diam fermentum at. Nullam in mi nisi. Sed feugiat lorem justo, quis sollicitudin dui accumsan vitae. Cras arcu quam, tincidunt et convallis eu, posuere eget arcu. In porttitor felis non neque tempor posuere. Curabitur congue enim et aliquam tempor. Maecenas finibus ultricies efficitur.

Vivamus imperdiet risus vel lacus fringilla sagittis. Phasellus dapibus vitae magna ac rutrum. Fusce pretium placerat purus, in feugiat ipsum dignissim sed. Morbi laoreet sem ut facilisis ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus et ornare nisl. In eget ex sed neque porta egestas sodales et leo. Sed mollis hendrerit enim, non volutpat ligula dictum id. Nam aliquam ultrices tellus nec tempor. Morbi auctor porttitor enim eget tristique. Nulla efficitur nunc nec porta dictum. Aliquam eget tortor ut elit lacinia cursus.

Aliquam erat...

CSS

body, html {
    margin: 0;
    height: 100vh;
    box-sizing: border-box;
}

ul {
    list-style: none;
    margin: 0;
    padding: 5px;
}

.smpl-container {
    display: flex;
    overflow: hidden;
    height: 100%;
}

.smpl-container--with-header {
    flex-direction: column;
}

.smpl-container--with-sidebar {
    flex-direction: row;
}

.smpl-container--with-sidebar .smpl-content {
    flex: 3;
}

.smpl-header {
    height: 35px;
    border-bottom: 1px solid #ccc;
    padding: 5px;
    display: flex;
    align-items: center;
}

.smpl-sidebar {
    flex: 1;
    background-color: #ccc;
    padding: 5px;
}

.smpl-content {
    flex: 1;
    overflow-y: auto;
    padding: 5px;
}