Flexbox

Watch User Created Playlist (8)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Flexbox Fundamentals

Using flex-direction to layout content horizontally and vertically

Using order to rearrange flexbox children

P

Demystifying alignment in flexbox children

P

Defining dimensions on flexbox children using flex-basis

P

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

P

Combining the flexbox sizing properties using the flex shorthand

P

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

P
css tutorial about Flexbox Fundamentals

Flexbox Fundamentals

9:55 css

In this lesson we'll look at all of the properties available to us with the CSS3 Flexible Box, or flexbox.

css tutorial about Using flex-direction to layout content horizontally and vertically

Using flex-direction to layout content horizontally and vertically

2:05 css

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.

css tutorial about Using order to rearrange flexbox children

Using order to rearrange flexbox children

1:17 css PRO

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

css tutorial about Demystifying alignment in flexbox children

Demystifying alignment in flexbox children

3:35 css PRO
css tutorial about Defining dimensions on flexbox children using flex-basis

Defining dimensions on flexbox children using flex-basis

1:38 css PRO

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

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

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

2:36 css PRO

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.

css tutorial about Combining the flexbox sizing properties using the flex shorthand

Combining the flexbox sizing properties using the flex shorthand

1:39 css PRO

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.

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

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

1:47 css PRO

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?