Flexbox Fundamentals

Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support. It is so awesome, and makes the arranging elements on a page almost fun!

Using flex-direction to layout content horizontally and vertically

2:05 flexbox

The Flexbox css spec allows for more adjustable layouts. The flex-direction property allows you to easily change the layout on the children of an element without making any changes to the dom, which is particularly useful when combined with media queries.

Using order to rearrange flexbox children

1:17 flexboxPRO

Using the order property we alter the order in which flexbox children appear on the page, without making changes to the dom.

Demystifying alignment in flexbox children

3:35 flexboxPRO

Defining dimensions on flexbox children using flex-basis

1:38 flexboxPRO

The flex-basis property allows us to define the dimension (along the flex-direction axis) that a flexbox child should ideally have.

Using flex-shrink and flex-grow to make flexbox children resize correctly

2:36 flexboxPRO

Flex-basis lets us set the ideal dimensions for a flexbox child, but flex-shrink lets us define what should happen if there isn't enough room, and flex-grow can define what happens when there is too much room.

Combining the flexbox sizing properties using the flex shorthand

1:39 flexboxPRO

The flex shorthand makes it easier to declare flex-shrink, flex-grow, and flex-basis, but it sometimes has unexpected results because the defaults differ.

Turning a flexbox into a grid using flex-wrap and align-content

1:47 flexboxPRO

Adding flex-wrap to a flexbox container allows the items to form a grid. The content can then be aligned and distributed along the grid using justify-content and align-content.

Using Flexbox in Websites and Applications

3:29 flexboxPRO

Flexbox makes it easier to create layouts that can adjust depending on the content that is added and the space available. In this lesson we look at a couple real-world applications of Flexbox in an application and website.