Flexbox Snippets

Note: Different syntax is required for different versions of different browsers. For information on browser support for flexbox, see Can I use Flexible Box Layout Module?.

Getting started

  • Put display: flex; in the styling for a div that’s going to hold the items (the container)
  • Put in some child divs with flex: 1; in the styling.*

The default direction for flexbox is row, so they will appear next to each other instead of stacked on top of each other.
*flex: 1; is shorthand for applying flex-grow: 1; flex-shrink: 1; flex-basis: auto;
Source: A Complete Guide to Flexbox

Make stacked child divs fill the available height
Say you have a container with a specified height, and you want the child divs to fill the container vertically.

  • Follow steps for ‘Getting started’.
  • Add flex-direction: column; on the container to stack the children on top of each other

Source: Boxes That Fill Height (Or More) (and Don’t Squish)

Centring div within parent
This is joyously easy to do. On the container element, set

  • display: flex;
  • justify-content: center; (this will align the child div horizontally)
  • align-items: center; (for the vertical alignment)

You don’t need to set anything on the child div unless you want its contents to be likewise aligned (in which case you apply these same stylings to the child div too).
Source: Designing CSS Layouts With Flexbox Is As Easy As Pie

About Jennifer Phillips Campbell

Software Developer and Medieval Historian
This entry was posted in Web Design. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s