Flex Box Fun

by Patrick Hund

HTML

<div id="demo1" class="demo">
    <div class="hotpink">
        hotpink
    </div>
    <div class="lime">
        lime
    </div>
    <div class="chocolate">
        chocolate
    </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

#demo1 {
    display: flex;
    justify-content: space-between;
}

#demo1 > .hotpink {
    flex: 0 0 100px;
}

#demo1 > .lime {
    flex: 0 0 100px;
}

#demo1 > .chocolate {
    flex: 0 0 100px;
}

body {
    font-family: "Fjalla One", sans-serif;
}

.demo {
    background-color: silver;
    margin-bottom: 12px;
}

.demo > div {
    padding: 12px;
    border-radius: 12px;
    text-align: center;
}
.hotpink {
    background-color: hotpink;
}

.lime {
    background-color: lime;
}

.chocolate {
    background-color: chocolate;
}