Positioning elements with Flexbox is easy

CSS gets a lot of criticism for how difficult it is to do simple design tasks, such as positioning an element in the center of its parent.

This used to be true many years ago. But CSS has improved a lot in recent years. Flexbox makes it very easy to position a child element in relation to its parent.

The example layout

The example layout has a body with a fullscreen background image an a div box with some placeholder text.

We are positioning the div box in relation to its body parent element.

Try it

Play around and place the box in different places.

1. Select the body element. Flexbox layout is defined on the parent (container) element.
2. Go to the Style panel.
3. Jump to the Flex Container section.
4. There use Align items and Justify content properties to control the vertical and horizontal placement of children elements (the div box in our case).
5. Note that by default Flexbox layout is organized in a column. Selecting Flex direction row would reverse the meaning of above properties.

Too much to remember? Use the AI Assistant to move the box for you.

Moving divs around is a hard job. Let's be super cool and have our AI Assistant do the heavy lifting:

Select the body element, as before and ask the AI Assistant to: