Learn Flexbox CSS in 8 minutes

Summary

The video script introduces the evolution of CSS layouts from floats and positioning to the transformative introduction of flexbox. It explains the basics of flexbox, including setting up a container and children in HTML, and using CSS to define the display as flex. The script covers the creation of invisible axes, alignment of items along the main and cross axes using justify-content and align-items, and the default horizontal orientation of the main axis. It also delves into altering the main axis with flex-direction, wrapping items with flex-wrap, and adding gaps with the gap property. The video further explores individual item properties like flex-grow, flex-shrink, flex-basis, align-self, and order, offering a comprehensive guide to mastering flexbox for web developers.

Takeaways

• 🌟 Introduction of flexbox revolutionized CSS layouts, providing an alternative to floats and positioning.
• 📦 To use flexbox, a container with a `display: flex` property is needed, along with child items in the HTML structure.
• 🔄 The default main axis is horizontal, but it can be set to vertical with the `flex-direction` property.
• 🕒 The `justify-content` property aligns items along the main axis, with options like `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, and `space-evenly`.
• 🔄 The `align-items` property aligns items along the cross axis, with options such as `flex-start`, `flex-end`, `center`, and `baseline`.
• 🔄 Understanding the main and cross axes is crucial for flexbox; items are laid out along the main axis and the cross axis is perpendicular to it.
• 🔄 The `flex-wrap` property allows items to wrap into multiple lines when there's not enough space, with options like `nowrap`, `wrap`, and `wrap-reverse`.
• 🔄 The `align-content` property aligns a flex container's lines along the cross axis, applicable when `flex-wrap` is set to `wrap`.
• 🌱 The `flex-grow` property allows items to grow and fill available space, taking a unitless value that represents a proportion.
• 📉 The `flex-shrink` property defines how an item shrinks relative to others, also taking a unitless value.
• 📏 The `flex-basis` property sets the initial size of an item before space distribution, which can be overwritten by other flex properties.

Q & A

What was the primary method for creating layouts before the introduction of flexbox?

Before flexbox, developers primarily used floats and positioning for creating layouts.

What is the first step in using flexbox?

The first step in using flexbox is to define a container with children in the HTML and then set the container's display property to 'flex' in CSS.

What are the two invisible axes created by a flex container?

The two invisible axes created by a flex container are the main axis and the cross axis.

How can you change the orientation of the main axis with flexbox?

You can change the orientation of the main axis with the 'flex-direction' property, setting it to 'column' for a vertical axis or 'row' for a horizontal axis.

What is the default value of the 'justify-content' property in flexbox?

The default value of the 'justify-content' property is 'flex-start', which aligns items at the start of the main axis.

How does the 'align-items' property affect items in a flex container?

The 'align-items' property aligns items along the cross axis. It can be set to 'flex-start', 'flex-end', 'center', 'baseline', or 'stretch'.

What happens when you set the 'flex-wrap' property to 'wrap'?

When 'flex-wrap' is set to 'wrap', items are allowed to wrap onto multiple lines when there's not enough space on the main axis.

What is the purpose of the 'align-content' property in flexbox?

The 'align-content' property aligns a flex container's lines along the cross axis when 'flex-wrap' is set to 'wrap' and there are multiple lines of items.

How does the 'flex-grow' property affect the size of flex items?

The 'flex-grow' property determines how much an item can grow relative to the rest of the items in the container when there is extra space on the main axis.

What does the 'flex-basis' property do in flexbox?

The 'flex-basis' property sets the initial size of a flex item before any remaining space is distributed according to 'flex-grow' and 'flex-shrink'.

What is the 'order' property in flexbox used for?

The 'order' property changes the order in which flex items appear in the container, regardless of their order in the HTML.

Outlines

00:00

🌟 Introduction to Flexbox and Basic Properties

This paragraph introduces the concept of Flexbox as a layout model in CSS, highlighting its transformative impact on web development. It explains the need for a container and children in HTML to utilize Flexbox, and how setting the container's display to 'flex' creates an invisible main and cross axis for item positioning. The paragraph details the use of 'flex-direction' to control the orientation of the main axis, defaulting to 'row' (horizontal), and how 'justify-content' aligns items along the main axis with options like 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', and 'space-evenly'. It also covers 'align-items' for cross-axis alignment with 'flex-start', 'flex-end', 'center', and 'baseline', emphasizing the importance of understanding the direction of the main and cross axes in Flexbox.

05:01

🔄 Flexbox Wrapping and Advanced Alignment

The second paragraph delves into the 'flex-wrap' property, which controls whether items wrap onto multiple lines when there's insufficient space on a single line. It explains the default 'nowrap' setting and how changing it to 'wrap' allows for multi-line layouts. Introducing the 'align-content' property, the paragraph describes its role in aligning items on the cross-axis when wrapping is enabled, with similar options to 'justify-content'. The discussion continues with the 'gap' property, which adds space between items, and an overview of other flexbox properties that apply to the children of the container, such as 'flex-grow', 'flex-shrink', 'flex-basis', and the shorthand 'flex'. The paragraph concludes with a brief mention of 'align-self' and 'order', which allow for individual control over items' alignment and order of appearance, respectively.

Keywords

💡Flexbox

Flexbox is a CSS3 layout module that provides a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic. In the video, Flexbox is introduced as a revolutionary tool that changed the way developers create layouts, moving away from floats and positioning to a more intuitive and flexible system.

💡Container

In the context of Flexbox, a container is an HTML element that has the 'display: flex' or 'display: inline-flex' property applied to it. This transforms the container into a flex container, allowing its direct children to become flex items that can be laid out according to the Flexbox model. The container is fundamental to Flexbox as it defines the flex context within which the items are positioned and aligned.

💡Main Axis

The main axis in Flexbox is the primary axis along which flex items are laid out. By default, it is horizontal, running from left to right. The behavior of the main axis is controlled by properties such as 'justify-content' and 'flex-direction', and it determines the direction in which items are placed within the container.

💡Cross Axis

The cross axis is the axis perpendicular to the main axis. It defines the direction for the alignment of flex items within the container. Properties like 'align-items' and 'align-self' control the positioning of items along the cross axis. Understanding the cross axis is crucial for achieving vertical alignment and equal distribution of space in a flex layout.

💡Justify Content

The 'justify-content' property in Flexbox aligns flex items along the main axis within the container. It has several values, including 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', and 'space-evenly', each providing a different way to distribute space and align items horizontally. This property is essential for controlling the overall alignment and spacing of items in a flex container.

💡Align Items

The 'align-items' property in Flexbox controls the alignment of flex items along the cross axis within the container. It takes into account the item's margin box, not just the content box. Common values include 'flex-start', 'flex-end', 'center', 'baseline', and 'stretch'. This property is key for vertical alignment and is similar to 'justify-content' but operates along the cross axis.

💡Flex Direction

The 'flex-direction' property in Flexbox defines the direction of the main axis, which in turn affects the flow (horizontal or vertical) of the flex items. By setting 'flex-direction' to 'row' or 'column', developers can control whether items are laid out in a line (horizontally or vertically) and how the main and cross axes are oriented.

💡Flex Wrap

The 'flex-wrap' property in Flexbox controls whether the flex items are forced into a single line or allowed to wrap onto multiple lines. With 'nowrap' as the default value, items will try to fit into one line. By setting 'flex-wrap' to 'wrap', items can wrap onto multiple lines when there's not enough space in the container, providing more flexibility in layout design.

💡Align Content

The 'align-content' property in Flexbox aligns a flex container's lines along the cross axis when the flex container has multiple lines and 'flex-wrap' is set to 'wrap'. It works similarly to 'align-items', but instead of aligning individual items, it aligns the entire group of items along the cross axis. This property is particularly useful when dealing with multi-line content in a flex container.

💡Gap

The 'gap' property in Flexbox specifies the space between flex items along the axis defined by the 'gap' property. It allows for consistent spacing between items without the need for additional markup or custom styles. This simplifies the process of creating even spaces between items in a flex container.

💡Flex Grow

The 'flex-grow' property in Flexbox specifies the proportion of the available space in the container that a flex item should grow to fill the extra space. It takes a unitless value that represents the item's share of the remaining space after all items have been laid out according to their flex basis. Items with higher 'flex-grow' values will grow more than those with lower values.

💡Flex Shrink

The 'flex-shrink' property in Flexbox controls the amount by which a flex item will shrink relative to the rest of the items in the container when there's not enough space. It takes a unitless value that represents the item's willingness to reduce its size. An item with a 'flex-shrink' value of '1' will shrink more than items with lower values, and setting it to '0' prevents the item from shrinking at all.

Highlights

CSS Stone Age developers used floats and positioning for layouts.

Flexbox introduced a revolutionary way to create layouts.

To use flexbox, you need a container with children in HTML.

Setting the container's display to 'flex' creates two invisible axes: main and cross.

The default main axis is horizontal; use 'flex-direction: row' to maintain this.

The 'justify-content' property aligns items along the main axis.

Items can be aligned on the cross axis using the 'align-items' property.

The 'flex-direction' set to 'column' makes the main axis vertical.

Flex items try to fit into one line by default, but 'flex-wrap: wrap' allows them to wrap.

The 'align-content' property aligns items on the cross axis when 'flex-wrap' is set to 'wrap'.

The 'gap' property adds space between flex items.

The 'flex-grow' property allows an item to grow if there's enough space.

The 'flex-shrink' property defines how fast an item shrinks compared to others.

The 'flex-basis' property defines the size of an item before space distribution.

The shorthand 'flex' combines 'flex-grow', 'flex-shrink', and 'flex-basis'.

The 'align-self' property overrides 'align-items' for individual items.

The 'order' property changes the order of items as they appear.

Using 'order' should be avoided unless absolutely necessary due to its impact on semantics and accessibility.

Transcripts

during the CSS Stone Age developers were

creating layouts with floats and

positioning until one fateful day

flexbox would be introduced and the

world would never be the same

to use flexbox first we need a container

and some children in our HTML

then in our CSS we can go straight to

the bottom of the file ignoring all of

the base tiles and give the container

the display of flex this created two

invisible axes a main axis and a cross

axis our items are no longer stacked on

top of one another because display Flex

is positioning our items on the main

axis and by default the main axis is

horizontal if we want we can change the

main axis to be vertical with the flex

Direction property

if we set the flex direction to column

the main axis will be vertical but if we

set it to row the main axis will be

horizontal we actually want our main

axis to be horizontal so we set Flex

direction to row or we could remove it

entirely because Flex direction is set

to row by default now knowing the

direction of our main axis we can align

our items along the main axis with the

justify content property the default is

flex start see nothing happened but if

we set it to flex end our items will be

pushed to the end of the line

Center will Center our items in the

middle space between will evenly

distribute the items at between the

first and the last item space around is

similar to space between but now the

edges also have some spacing to them and

finally space evenly will evenly

distribute space in between all the

items

justify content is for aligning items on

the main axis but we can also align

items along the cross axis with the

Align items properly

Flex start places items at the start of

the Cross axis flex and places items at

the end of the Cross Axis Center will

Center our items in the middle of the

Cross axis and Baseline will align items

so that the Baseline text of each item

is aligned you can see this more clearly

when I increase the size of some items

the font size on the first item is now

larger than the second but with a line

item set to Baseline the Baseline of

both text are aligned now just to

clarify because this is important

justify content is aligning items on the

main axis and align items is aligning

items on the cross axis if we don't

Define a flex Direction on the container

then Flex direction is set to row by

default which also means that the main

axis is set to horizontal by default

left to right and that the cross axis is

set to Vertical by default top to bottom

we can switch them so that the main axis

becomes vertical instead of horizontal

by defining a flex direction of column

when the flex direction is set to column

justify content will still align items

on the main axis but now that we defined

the flex direction to be column the main

axis is now vertical this is the key to

understanding flexbox

by default Flex items will all try to

fit into one line when I add more items

to The Container the items will start

crushing each other to fix this we can

make our items wrap with the flex drop

property by default this is set to no

wrap but we can set it to wrap and now

our items are no longer trying to fit

into one line but instead are allowed to

wrap when there's no more space

available

when we have Flex drop set to wrap a new

property is unlocked the Align content

property not to be confused with align

items align content property only works

when we have Flex wrap set to wrap and

have items wrapping this property allows

us to align everything on the cross axis

the possible values that go here are

pretty much the same as with the

Justified content so flex and Center

space between space around space evenly

and flex start

you can also add gaps in between items

currently all our items are touching

each other we can use the Gap property

on the container to add gaps in between

each item like this

all the flexbox properties I've shown

you so far belong inside the container

but there's also a few other flexbox

properties that belong in the direct

Children of the container

flexgro is one of them but before I get

into it in the HTML I'm going to remove

most of the items and leave just the

first three then back in our CSS we can

remove the flex wrap and the Align

content because we don't need them

anymore then under our container we can

select the third item by its class name

item three and give it the flex grow of

One Flex grow takes a unitless value

that serves as a proportion and what it

does is allows the item to grow if

there's enough space for it to do so

we see our third item grew to fill out

the remaining space the same will happen

if instead I apply this rule on either

the first or second item if they all

have Flex growth set to 1 then the

remaining space will be distributed

equally to all children

next is flex shrink Flex shrink also

takes a unitless value this property

though defines how fast one item shrinks

in comparison to the others if I set

item 1 to have a flex shrink of 5 for

example the item 1 will shrink much

faster than the other items if I don't

want an item to shrink at all I can set

it to flex zero now the item is refusing

to shrink

Flex bases defines the size of an item

before the remaining space is

distributed basically if your item

already has a size like a width but you

want to overwrite that size with

something else then you use flex spaces

for example my item has a width of 150

pixels I can overwrite that by setting

the flex basis to something else like

300 pixels now my item has a width of

200 pixels if you set it to zero you're

basically shrinking it to the max

personally I almost never accept any few

Niche exceptions use either the flex

growth Flex shrink and flex bases but

instead I use the shorthand called Flex

Flex is the shorthand for the flex

growth like shrink and flex spaces

combined but the second and third

parameters are optional

when you set Flex to only have one value

like Flex 1 the other two optional

values are set automatically and

intelligently for you

another item property is the Align self

this one will overwrite the value you

set in the Align item on the container

but for an individual item so for

example if I have a line item set to

flex start on the container but want the

first item to be aligned Center on the

cross axis I can use the Align self

property to overwrite what I defined in

the container and have this individual

item be placed at the center

other than Center you can also have Flex

start Flex end and Baseline as possible

values

the last property is the order property

by default our items are laid out in the

order of our HTML item 1 item 2 and item

3. however we can use this property to

change the order in which items appear

say if I want the last item to appear

first I can give it the order property

and set it to -1

minus 1 because the default value of

this property is zero this means that

all our items have an order set to 0 by

default so for us to have the third item

appear first I need to set it to -1

if I want the first item to appear last

then I give it the order of 1. this

property by the way really shouldn't be

something you use unless you absolutely

have to because it messes with the

semantics and the accessibility of your

HTML

if you enjoyed the video or learned

something please consider leaving a like

and booping the Subscribe button thanks

for watching