The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Cascading Style Sheets bring order and beauty to our applications.

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!

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 flex-direction to layout content horizontally and vertically

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

Using order to rearrange flexbox children

Demystifying alignment in flexbox children

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

Defining dimensions on flexbox children using flex-basis

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.

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

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.

Combining the flexbox sizing properties using the flex shorthand

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.

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

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.

Flexbox Fundamentals

Garth Braithwaite

Course Content