Coding log 05.04.19

May 3rd, 2019

Today I started on a new challenge: CSS Flexbox

Layouts of elements have always been a challenge in web design. Especially in earlier years when browsers interpreted code so differently.

CSS3 introduced Flexible Boxes to help out with this challenge. All modern browsers support Flex Box, which lets us create dynamic page layouts.

display: flex

In order for us to use flex properties on an element, we need to place the CSS property display: flex on it. When we do, the elements inside this parent container is now flexible. The parent element is turned into a flex container.

If we have two elements inside an element with display:flex on it, they will be positioned next to each other.

#box-container { height: 500px; display:flex; } #box-1 { background-color: dodgerblue; width: 50%; height: 50%; } #box-2 { background-color: orangered; width: 50%; height: 50%; }


flex-direction is the property that determines if we should turn the elements inside a flex container to rows or columns. We set this in the parent element (the flex container). Creating a row (default) will align the children horizontally. And creating a column will align the children vertically. There is also the possibility for row-reverse and column-reverse.

#box-container { display: flex; height: 500px; flex-direction: row-reverse; }