Flexbox

by Nick Karnik

HTML

<header>
<button id=toggle class=toggle>Toggle</button>
</header>
<div class=container>
    <main>Main content</main>
    <aside id=prop>Properties</aside>
</div>

CSS

.toggle {
    background-color: blue;
    border: none;
    padding: 5px;
    color: white;
}

.toggle:hover {
    background-color: yellow;
    color: red;
}

body {
    margin: 0;
}
header {
    background-color: gray;
    padding: 10px;
}

.container {
 display: flex;
    flex-flow: row nowrap;
    /* height: 90vh; */
    bottom: 0px;
    background-color: green;
    position: absolute;
    top: 45px;
    width: 100%;
}

main {
    background-color: red;
    flex: 3;
}

aside {
    background-color: blue;
    flex: 1;
    transition: all 2s ease-out 3s;
}

JavaScript

var toggle = 'none';

document.getElementById('toggle').addEventListener('click', function(e) {
    document.getElementById('prop').setAttribute('style', 'display:' + toggle);
    toggle = (toggle == 'none') ? 'flex-item' : 'none';
});