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.
Play around and place the box in different places.
- Select the
bodyelement. Flexbox layout is defined on the parent (container) element.
- Go to the Style panel.
- Jump to the Flex Container section.
- There use Align items and Justify content properties to control the vertical and horizontal placement of children elements (the div box in our case).
- 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:
body element, as before and ask the AI Assistant to:
Position the child element in the top left corner.
Position the child element in the center.
Position the child element to the right, stretch it from top to bottom.
Make a joke about positioning elements with Flexbox.