FlexboxBuilder

Template gallery

A small collection of typical flexbox use cases.

Centered element

Single element centered vertically and horizontally.

To center an element in both direction use display: flex, justify-content: center and align-items: center on the parent element. You don't need to put any styles on the child element.
Centered column

Two elements, one under the other, centered horizontally.

To create a centered column put display: flex, flex-direction: column, justify-content: center and align-items: center on the parent element. You don't need to put any styles on child elements.
Sticky footer

Three elements, last of them push to the bottom of the container.

Make sure your document's body is at least as tall as viewport, then apply display: flex and flex-direction: column to it. Finally, give your footer (last child) margin-top: auto.
Full height children

Two elements, one next to the other, both filling parent's height.

Put display: flex and align-items: stretch on your flex container. If children do not fill the full height, try resetting their height and max-height.
Header navigation

Multiple elements in a row, first aligned to the left, the rest aligned to the right.

Turn parent element into a flex-container with display: flex and push all extra white space to the left of chosen item with margin-left: auto. It this case space is on the left of the second item.
Text at the bottom

Element in the bottom left corner of its parent.

Turn the container into flex-container with display: flex, then push child to the bottom by setting align-items: flex-end and to the left with justify-content: flex-start on the flex-container. Child element need no flex properties.

Features

it's a truly visual builder. There's no more guessing if you need justify-content or align-items to get what you want. You choose one of possible positions and get the answer to the question: how to make it with flexbox?
it's intuitive - whenever you change flex-direction all the margins get automatically updated to keep spacing in main and and cross axis the way they were.
it's genuine - there is no canvas element, no weird javascript magic calculating pixels. This is built with flexbox. If you feel like opening this builder in developer tools, you can. However, CSS box will no longer reflect your layout.
it spares you guessing - only options, that can influence current layout are displayed. If you see a button, be sure to know it will do something.
What you can build.
it's keyboard friendly - designed with extra love for keyboard users and everybody else who likes Ctrl + A to select all items or Delete to remove an item.
it works just like wysiwyg editor - you don't need to know anything about flexbox to get started.
it has history of all the steps you have taken so that you can compare what changed between two states or go back to a previous layout.
it's concise - if you can achieve the same result with less lines of CSS, the builder will show you the shortest CSS possible

About

Template gallery

Centered element

Centered column

Sticky footer

Full height children

Header navigation

Text at the bottom

Features

Author

FlexBox Builder

About

Template gallery

Centered element

Centered column

Sticky footer

Full height children

Header navigation

Text at the bottom

Features

Author