Flexbox

To position elements on your screen, you can use Flexbox. Flexbox is a layout module based on CSS 3.

The layout is divided into two parts: Container and Items.

Container and Items in Flexbox

Flexbox has separate properties for containers and items.

Container properties like flex-direction, align-items and justify-content set the layout rules for the items inside the container.

flex-direction defines the direction in which the items are placed in the container.

flex-direction

align-items defines the default behaviour for how items are laid out along the cross axis on the current line.

align-items

justify-content defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

justify-content

Item properties like align-self, flex, and aspect-ratio set the layout rules for a particular item in the container. Item properties take precedence over container properties.

align-self allows the default alignment (or the alignment set by a container property) to be overridden for an individual item.

align-self

By using the item property flex, which is a combination of flex-grow, flex-shrink, and flex-basis, our layout will now change to:

Use the align-items and justify-content property to bring your header and footer text to the center.

Our layout looks much better than what we had initially started with. But UI contains a lot more than just rectangular boxes and buttons.

What else do we need?