Learn the most important concepts of CSS Flexbox Layout in 100 seconds. 

#css #webdev #100SecondsOfCode 

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:22:10.398Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
f481c0d8-3903-422f-a412-9c3ce80b7631
54c2dac11b8ac32e1ffbf85faaafff82df237fc0712bad48a7a7ac030e6d6da6
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Flexbox, a flexible way to layout items as either a column or a row.
Start with a container, like a div, and give it a Display property of flex.
The flex container now has control over how its immediate children are laid out.
By default, the flex direction is set to row and a row has a main axis that runs horizontally and a cross axis that runs vertically.
If we add items to the row with a fixed width, they'll sit in the top left corner.
That's because the main axis starts at the left and the cross axis at the top.
The items will be laid out one after the other from the main axis starting display.
The amount of space that each item takes up on the main axis is known as the main size.
In this case, each item has a fixed width of 50 pixels.
Dist, but if we change the item width to a 100%, the flexible container will distribute the items evenly across the main axis.
You can now think of the sizing scene in terms of a ratio where each item takes up 1 unit of space.
You can change that ratio by setting the flex property on an individual item.
If we set flex to 2 on the middle item, it now takes up 50% of the available space because there's a total of 4 flex units at play.
Now, you'll often want to control the way items are spaced or align along the main axis.
Use justify content to space your items evenly, maximize the space between, or push them to the flex endpoint.
You can also use these same techniques along the cross axis with the align items property.
And that means we can easily align things both horizontally and vertically by both aligning and justifying the items to the center.
We can easily convert our row into a column by setting the flex direction to column.
The only thing that changed is that our main axis now runs vertically and the cross axis horizontally.
D Everything else works exactly the same.
Just tilt your head sideways.
This has been CSS Flexbox in 100 seconds.
Make sure to hit the like button if you want to see more short videos like this.
Thanks for watching and I will see you in the comments.

Speaker 0: Flexbox, a flexible way to layout items as either a column or a row. Start with a container, like a div, and give it a Display property of flex. The flex container now has control over how its immediate children are laid out. By default, the flex direction is set to row and a row has a main axis that runs horizontally and a cross axis that runs vertically. If we add items to the row with a fixed width, they'll sit in the top left corner.

That's because the main axis starts at the left and the cross axis at the top. The items will be laid out one after the other from the main axis starting display. The amount of space that each item takes up on the main axis is known as the main size. In this case, each item has a fixed width of 50 pixels. Dist, but if we change the item width to a 100%, the flexible container will distribute the items evenly across the main axis.

You can now think of the sizing scene in terms of a ratio where each item takes up 1 unit of space. You can change that ratio by setting the flex property on an individual item. If we set flex to 2 on the middle item, it now takes up 50% of the available space because there's a total of 4 flex units at play. Now, you'll often want to control the way items are spaced or align along the main axis. Use justify content to space your items evenly, maximize the space between, or push them to the flex endpoint.

You can also use these same techniques along the cross axis with the align items property. And that means we can easily align things both horizontally and vertically by both aligning and justifying the items to the center. We can easily convert our row into a column by setting the flex direction to column. The only thing that changed is that our main axis now runs vertically and the cross axis horizontally. D Everything else works exactly the same.

Just tilt your head sideways. This has been CSS Flexbox in 100 seconds. Make sure to hit the like button if you want to see more short videos like this. Thanks for watching and I will see you in the comments.
Flexbox, a flexible way to layout items as either a column or a row. Start with a container, like a div, and give it a Display property of flex. The flex container now has control over how its immediate children are laid out. By default, the flex direction is set to row and a row has a main axis that runs horizontally and a cross axis that runs vertically. If we add items to the row with a fixed width, they'll sit in the top left corner. That's because the main axis starts at the left and the cross axis at the top. The items will be laid out one after the other from the main axis starting display. The amount of space that each item takes up on the main axis is known as the main size. In this case, each item has a fixed width of 50 pixels. Dist, but if we change the item width to a 100%, the flexible container will distribute the items evenly across the main axis.
You can now think of the sizing scene in terms of a ratio where each item takes up 1 unit of space. You can change that ratio by setting the flex property on an individual item. If we set flex to 2 on the middle item, it now takes up 50% of the available space because there's a total of 4 flex units at play. Now, you'll often want to control the way items are spaced or align along the main axis. Use justify content to space your items evenly, maximize the space between, or push them to the flex endpoint. You can also use these same techniques along the cross axis with the align items property.
space
And that means we can easily align things both horizontally and vertically by both aligning and justifying the items to the center. We can easily convert our row into a column by setting the flex direction to column. The only thing that changed is that our main axis now runs vertically and the cross axis horizontally. D Everything else works exactly the same. Just tilt your head sideways. This has been CSS Flexbox in 100 seconds. Make sure to hit the like button if you want to see more short videos like this. Thanks for watching and I will see you in the comments.
Flexbox, a flexible way to layout items as either a column or a row. Start with a container, like a div, and give it a Display property of flex. The flex container now has control over how its immediate children are laid out. By default, the flex direction is set to row and a row has a main axis that runs horizontally and a cross axis that runs vertically. If we add items to the row with a fixed width, they'll sit in the top left corner. That's because the main axis starts at the left and the cross axis at the top. The items will be laid out one after the other from the main axis starting display. The amount of space that each item takes up on the main axis is known as the main size. In this case, each item has a fixed width of 50 pixels. Dist, but if we change the item width to a 100%, the flexible container will distribute the items evenly across the main axis. You can now think of the sizing scene in terms of a ratio where each item takes up 1 unit of space. You can change that ratio by setting the flex property on an individual item. If we set flex to 2 on the middle item, it now takes up 50% of the available space because there's a total of 4 flex units at play. Now, you'll often want to control the way items are spaced or align along the main axis. Use justify content to space your items evenly, maximize the space between, or push them to the flex endpoint. You can also use these same techniques along the cross axis with the align items property. And that means we can easily align things both horizontally and vertically by both aligning and justifying the items to the center. We can easily convert our row into a column by setting the flex direction to column. The only thing that changed is that our main axis now runs vertically and the cross axis horizontally. D Everything else works exactly the same. Just tilt your head sideways. This has been CSS Flexbox in 100 seconds. Make sure to hit the like button if you want to see more short videos like this. Thanks for watching and I will see you in the comments.
Flexbox,
flexbox
a
a
flexible
flexible
way
way
to
to
layout
layout
items
items
as
as
either
either
a
a
column
column
or
or
a
a
row.
row
Start
start
with
with
a
a
container,
container
like
like
a
a
div,
div
and
and
give
give
it
it
a
a
Display
display
property
property
of
of
flex.
flex
The
the
flex
flex
container
container
now
now
has
has
control
control
over
over
how
how
its
its
immediate
immediate
children
children
are
are
laid
laid
out.
out
By
by
default,
default
the
the
flex
flex
direction
direction
is
is
set
set
to
to
row
row
and
and
a
a
row
row
has
has
a
a
main
main
axis
axis
that
that
runs
runs
horizontally
horizontally
and
and
a
a
cross
cross
axis
axis
that
that
runs
runs
vertically.
vertically
If
if
we
we
add
add
items
items
to
to
the
the
row
row
with
with
a
a
fixed
fixed
width,
width
they'll
they'll
sit
sit
in
in
the
the
top
top
left
left
corner.
corner
That's
that's
because
because
the
the
main
main
axis
axis
starts
starts
at
at
the
the
left
left
and
and
the
the
cross
cross
axis
axis
at
at
the
the
top.
top
The
the
items
items
will
will
be
be
laid
laid
out
out
one
one
after
after
the
the
other
other
from
from
the
the
main
main
axis
axis
starting
starting
display.
display
The
the
amount
amount
of
of
space
space
that
that
each
each
item
item
takes
takes
up
up
on
on
the
the
main
main
axis
axis
is
is
known
known
as
as
the
the
main
main
size.
size
In
in
this
this
case,
case
each
each
item
item
has
has
a
a
fixed
fixed
width
width
of
of
50
50
pixels.
pixels
Dist,
dist
but
but
if
if
we
we
change
change
the
the
item
item
width
width
to
to
a
a
100%,
100%
the
the
flexible
flexible
container
container
will
will
distribute
distribute
the
the
items
items
evenly
evenly
across
across
the
the
main
main
axis.
axis
You
you
can
can
now
now
think
think
of
of
the
the
sizing
sizing
scene
scene
in
in
terms
terms
of
of
a
a
ratio
ratio
where
where
each
each
item
item
takes
takes
up
up
1
1
unit
unit
of
of
space.
space
You
you
can
can
change
change
that
that
ratio
ratio
by
by
setting
setting
the
the
flex
flex
property
property
on
on
an
an
individual
individual
item.
item
If
if
we
we
set
set
flex
flex
to
to
2
2
on
on
the
the
middle
middle
item,
item
it
it
now
now
takes
takes
up
up
50%
50%
of
of
the
the
available
available
space
space
because
because
there's
there's
a
a
total
total
of
of
4
4
flex
flex
units
units
at
at
play.
play
Now,
now
you'll
you'll
often
often
want
want
to
to
control
control
the
the
way
way
items
items
are
are
spaced
spaced
or
or
align
align
along
along
the
the
main
main
axis.
axis
Use
use
justify
justify
content
content
to
to
space
space
your
your
items
items
evenly,
evenly
maximize
maximize
the
the
space
space
between,
between
or
or
push
push
them
them
to
to
the
the
flex
flex
endpoint.
endpoint
You
you
can
can
also
also
use
use
these
these
same
same
techniques
techniques
along
along
the
the
cross
cross
axis
axis
with
with
the
the
align
align
items
items
property.
property
And
and
that
that
means
means
we
we
can
can
easily
easily
align
align
things
things
both
both
horizontally
horizontally
and
and
vertically
vertically
by
by
both
both
aligning
aligning
and
and
justifying
justifying
the
the
items
items
to
to
the
the
center.
center
We
we
can
can
easily
easily
convert
convert
our
our
row
row
into
into
a
a
column
column
by
by
setting
setting
the
the
flex
flex
direction
direction
to
to
column.
column
The
the
only
only
thing
thing
that
that
changed
changed
is
is
that
that
our
our
main
main
axis
axis
now
now
runs
runs
vertically
vertically
and
and
the
the
cross
cross
axis
axis
horizontally.
horizontally
D
d
Everything
everything
else
else
works
works
exactly
exactly
the
the
same.
same
Just
just
tilt
tilt
your
your
head
head
sideways.
sideways
This
this
has
has
been
been
CSS
css
Flexbox
flexbox
in
in
100
100
seconds.
seconds
Make
make
sure
sure
to
to
hit
hit
the
the
like
like
button
button
if
if
you
you
want
want
to
to
see
see
more
more
short
short
videos
videos
like
like
this.
this
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
comments.
comments
success
The speaker explains how to use Flexbox in a CSS layout. They explain how to set the flex direction for each row and how to adjust the main and cross axis. They also explain how to use justify content and adjust the alignment between items by adjusting the flex property. Finally, they give a quick recap of the process and encourage viewers to check out their previous videos.
CSS Flexbox in 100 Seconds
Flexbox, a flexible way to layout items as either a column or a row. Start with a container, like a div, and give it a Display property of flex. The flex container now has control over how its immediate children are laid out. By default, the flex direction is set to row and a row has a main axis that runs horizontally and a cross axis that runs vertically. If we add items to the row with a fixed width, they'll sit in the top left corner. That's because the main axis starts at the left and the cross axis at the top. The items will be laid out one after the other from the main axis starting display. The amount of space that each item takes up on the main axis is known as the main size. In this case, each item has a fixed width of 50 pixels. Dist, but if we change the item width to a 100%, the flexible container will distribute the items evenly across the main axis. You can now think of the sizing scene in terms of a ratio where each item takes up 1 unit of space. You can change that ratio by setting the flex property on an individual item. If we set flex to 2 on the middle item, it now takes up 50% of the available space because there's a total of 4 flex units at play. Now, you'll often want to control the way items are spaced or align along the main axis. Use justify content to space your items evenly, maximize the space between, or push them to the flex endpoint. You can also use these same techniques along the cross axis with the align items property. And that means we can easily align things both horizontally and vertically by both aligning and justifying the items to the center. We can easily convert our row into a column by setting the flex direction to column. The only thing that changed is that our main axis now runs vertically and the cross axis horizontally. D Everything else works exactly the same. Just tilt your head sideways. This has been CSS Flexbox in 100 seconds. Make sure to hit the like button if you want to see more short videos like this. Thanks for watching and I will see you in the comments.
The speaker explains how to use Flexbox in a CSS layout. They explain how to set the flex direction for each row and how to adjust the main and cross axis. They also explain how to use justify content and adjust the alignment between items by adjusting the flex property. Finally, they give a quick recap of the process and encourage viewers to check out their previous videos.