Morris Jeffreys

Flexbox, a Beginners Guide

Est. Reading Time: 2 minute

If you are looking for a more efficient way to layout, align and distribute space of items within a container that is dynamic or size unknown, then Flexbox may be an option.

Flexbox gives the container the ability to alter its items width/height to best fill the available space.  This is perfect for tablet and mobile devices.  The container will expand and contract in order to fill the space available.

Properties for the Container:

display – defines the flex container .container { display: flex; /* or inline-flex */ }

flex-direction – establishes the main axis which defines the direction of the flex items which are placed in the flex container. .container { flex-direction: row | row-reverse | column | column-reverse; }

flex-wrap – by default, flex items will try to fit on one line. .container { flex-wrap: nowrap | wrap | wrap-reverse ; }

justify-content – alignment along main axis. .container  {justify-content: flex-start | flex-end | center | space-between | space-around; }

align-items – how flex items are laid out along the cross axis on the line, kind of like justify-content. .container { align-items: flex-start | flex-end | center | baseline | stretch; }

align-content – Similar to how justify-content aligns individual items within the main-axis.

 

Properties for the Children (items in container):

order – by default the items are in source order. .item {order: <integer>;}

flex-grow – allows items to grow if necessary .item {flex-grow: <number>; /* default 0 */} If item is set to 1 that item will use equal space.  If item is set to 2 that item will take up twice the space.

flex-basis – default size of element before remaining space is distributed. .item {flex-basis: <length> | auto; /* default auto */}

align-self – basically an overwrite for an item to override align-items.

Using Flexbox for Main Navigation

In the css below, change the justify-content to different options to see what happens.

Sources:

http://www.w3.org/TR/css3-flexbox/ | http://flexboxin5.com/ (Test Playground) | https://css-tricks.com/snippets/css/a-guide-to-flexbox/