Select Page

Flexbox Demo 1

This is a short presentation of the steps needed to create a simple layout with elements aligned properly. 

I have used background colors in the rows and columns to show the layout details more clearly, as well as a 1rem padding on the rows.

Please note that the content is completely random.

What we get when we create a row with two columns and insert the needed elements

HEADING

Subheading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

What we want: the target layout

HEADING

Subheading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.