Mastering CSS Flexbox: From Centering Elements to Responsive Layouts

Name: Learn CSS Flexbox in 20 Minutes (Course)
Uploaded: 2026-01-12T11:36:20.551431+00:00
Channel: Coding2GO
Description: Summary and key takeaways on Mastering CSS Flexbox: From Centering Elements to Responsive Layouts, covering Introduction In this article we break down the

Coding2GO

Jan 12, 2026

•

4 min read

YouTube video ID: wsTv9y931o8

Source: YouTube video by Coding2GO — Watch original video

PDF

Introduction

In this article we break down the essential concepts of CSS Flexbox, a powerful layout system that solves common problems such as overflowing elements, awkward resizing, and complex responsive designs. The content follows the flow of a tutorial video, turning every spoken step into clear, actionable guidance.

1. The Flex Container and the Display Property

display: flex turns any HTML element (body, div, section, etc.) into a flex container.
Once a container is flex, its direct children become flex items and are laid out along two axes:
Main axis – the primary direction of flow (row by default).
Cross axis – perpendicular to the main axis.

2. Centering Elements

Horizontal centering (along the main axis) uses justify-content.
Values: flex-start (default, left), flex-end (right), center (middle).
Vertical centering (along the cross axis) uses align-items with the same three values.
Combining both: css body { display: flex; justify-content: center; /* horizontal */ align-items: center; /* vertical */ } This three‑line pattern centers any child element inside its parent.

3. Advanced Spacing with justify-content and align-items

Additional values add flexible gaps:
space-between – first and last items touch container edges, equal space between items.
space-around – equal space around each item; edges get half‑size gaps.
space-evenly – all gaps, including edges, are exactly the same.
These values automatically adapt when the container is resized.

4. Controlling Direction with flex-direction

flex-direction: row (default) – items flow left‑to‑right.
flex-direction: row-reverse – flow right‑to‑left; start/end values swap.
flex-direction: column – items stack vertically; now the main axis is vertical and align-items handles horizontal centering.
Practical tip: to build a page where everything is stacked vertically but centered horizontally, use: css body {display: flex; flex-direction: column; align-items: center;}

5. Gaps Between Items

The gap property (formerly grid-gap) adds consistent spacing without extra margins.
You can set a single value (gap: 20px;) or separate horizontal/vertical gaps with row-gap and column-gap.

6. Wrapping Items for Responsiveness

flex-wrap: wrap lets items move to a new line when there isn’t enough space.
Without wrap (flex-wrap: nowrap) items shrink together.
When wrapping, each line gets its own main and cross axes. To align the whole group of lines, use align-content (values mirror those of justify-content).

7. Resizing Items: flex-grow and flex-shrink

flex-grow (default 0) lets an item expand to fill extra space.
flex-grow: 1 on all items distributes remaining space equally.
Different numbers act as multipliers (e.g., flex-grow: 5 grows five times faster than flex-grow: 1).
flex-shrink (default 1) lets an item contract when space is limited.
Setting flex-shrink: 0 prevents shrinking, which can cause overflow.
Combine with min-width / max-width to cap growth or shrinkage.

8. Individual Item Alignment

align-self overrides align-items for a single flex item on the cross axis.
No direct counterpart for the main axis in Flexbox; you would use margins (e.g., margin-right: auto) to push a single item to one side.

9. From Flexbox to CSS Grid

While Flexbox excels at one‑dimensional layouts, Grid handles two‑dimensional arrangements more succinctly.
Example: centering a div with Grid needs only two lines: css .container {display: grid; place-content: center;}
The tutorial suggests learning both systems for a complete toolbox.

10. Practical Exercise

To center numbers inside each box, apply Flexbox to the box itself: css .box {display: flex; justify-content: center; align-items: center;} This mirrors the earlier container‑centering technique.

Summary of Key Flexbox Capabilities

Position any item anywhere by mastering the main and cross axes.
Use justify-content, align-items, and align-content for precise spacing.
Enable wrapping with flex-wrap for responsive rows/columns.
Control size dynamics with flex-grow, flex-shrink, and min/max constraints.
Apply gap, row-gap, and column-gap for clean spacing without extra markup.
Override alignment per‑item with align-self and strategic margins.

The article concludes by encouraging further study of CSS Grid, noting that many layout challenges become even simpler with Grid’s two‑dimensional approach.

Flexbox gives you fine‑grained control over alignment, spacing, wrapping, and responsive resizing—all with just a few CSS properties. Mastering its axes, justify/align utilities, and grow/shrink behavior lets you build robust, adaptable layouts without the headaches of floats or manual calculations.

Frequently Asked Questions

Who is Coding2GO on YouTube?

Coding2GO is a YouTube channel that publishes videos on a range of topics. Browse more summaries from this channel below.

Does this page include the full transcript of the video?

Yes, the full transcript for this video is available on this page. Click 'Show transcript' in the sidebar to read it.

Summarize another video

Full Transcript YouTube

have you ever struggled with overflowing
elements or weird resizing behavior in
CSS and you just want to be able to
create these awesome responsive layouts
well then let me tell you today I have
something really really special for you
I did some research to find out what is
the best piece of information we can
teach you in CSS and here it is a
complete CSS flexbox
[Music]
course I know from experience that
understanding flexbox will get you to a
level of superior understanding of how
things work in CSS when I first heard
about it years ago it completely changed
the way I approach coding in CSS it will
enable you to create beautiful and
responsive layouts in any imaginable way
you're going to feel so much more
confident When approaching typical CSS
problems like how to center a div or how
can I make my website responsive with
just a few lines of code it all starts
with HTML where you have to define a
reference point this could be the body
or a specific container that you use for
your layout every HTML element that
holds any type of content can be a flex
boox or GD container our first goal is
finding out how to align elements
anywhere inside its parent element at
the top bottom left right center and
every combination in between so we are
going to answer the most popular
beginner question how to center a diff
in HTML we have these five diff
container boxes they have some very
basic Styles in CSS to align your boxes
with a flex boox layout you need to
address the parent element so we address
the body and apply display
Flex notice how this immediately changed
the way the the boxes are positioned
they used to be one below the other and
now they are side by side the display
property is a very important CSS
property most elements have a display of
block or inline per default block
elements take up the entire width of the
screen this results in elements being
forced to the next line when we apply
display Flex we leave this system behind
and enter a new world here things work
differently let's add a little border so
that we can see the frame of our flexbox
layout the most important Concept in
flexbox are the axes along which items
are positioned the main axis and the
cross axis they control the flow of our
flexbox layout to position your elements
you have to keep both of these axes in
mind don't worry I will keep showing
them every once in a while to position
your elements anywhere along the main
axis you need the justify content
property this property has three basic
values Flex start is at the start of the
main axis this is the default value
which is why our boxes are here at the
left side of our screen
Flex end is at the end of the main axis
this will align the boxes on the right
side and Center is at the center of the
main axis so you can use these two lines
of code display flex and justify content
Center to Center your elements
horizontally by the way this video is a
free sample of our HTML and CSS complete
course so if you like the way we teach
and you want to learn more about web
development then get the full course
right now now let's see how we can align
elements vertically
in this case we need to consider the
cross axis to do this let's increase the
size of the flexbox layout by applying a
Min height of 800 pixels in the body now
we can see that this black border is
basically the frame of our flexbox
layout to Center your elements on the
cross axis we use the Align items
property this property can have the same
values as justify content so you have
Flex start for top positioning meaning
at the start of the Cross
axis X end for bottom positioning now
they are down here and of course Center
to put them in the
center and now we have finally answered
how to center a div you just need these
three lines of code to Center elements
along the main and cross axis since
flexbox is flexible this layout will
work even if we change the size of the
layout the boxes will always be in the
center no matter if we change the height
and width of the body but justify
content and align items can have three
additional and more complex values space
between space around and space evenly
space between will distribute the
elements from left to right the first
and last element will touch the edge of
the layout depending on how big the
container is the elements will have a
bigger Gap in
between space around Works similarly but
here the first and last element do not
touch the edge instead every element
gets some space to the left and right as
you can see even when I resize the
entire website the spacing between the
elements adjusts
automatically but here we run into a
slight inconsistency that just triggers
my OCD since the right space of the Box
adds up with the left space of the
second box it will result in these
spaces being twice as big as the spaces
that we have to the edges if you don't
want that you can use space evenly here
all the spaces are the same size and now
finally the gaps are perfectly balanced
as all things should be and of course
all of these values are completely
flexible they adjust perfectly when the
size of the container changes and that's
the whole point of using Flex boox
theoretically you could achieve the same
thing centering a div and positioning
your elements using only margins and
padding but they are just not as
flexible as a flexbox layout by the way
you can use the same values on the Align
items property as well but in this case
it wouldn't make sense since we only
have one row of content the boxes will
all just be at the start of the Cross
AIS but it is possible to use these
values on the cross axis as you will
learn later once the layouts get more
complex for now let's learn about
another interesting flexbox property
which is flex direction to understand it
easier let's remove align items and just
use justify content Flex start for now
the flex Direction property controls the
direction of the main axis its default
value is row which makes the main axis
go from left to right you could also use
row reverse to make it go from right to
left looking at the numbers we can see
that it starts counting from the right
but this property also changed the way
our justifi content value works now as
the main axis goes from right to left
the value Flex start is on the right
side and flex end is on the left
side you can also make the main axis go
from top to bottom by applying Flex
Direction
column now the elements are no longer
side by side but instead on top of each
other since the direction of the main
axis changed the direction of the Cross
ax has changed as well now if you want
to Center these boxes horizontally you
no longer use Justified content but
instead align items since justify
content aligns the elements on the main
axis which goes from top to bottom it
doesn't make sense now to use it we need
to use align items Center to Center them
on the cross axis so I hope you
understand that it is really important
to remember the flex direction of your
layout as this completely changes the
way all the other properties work per
default flexbox uses a Flex Direction
row this will align the elements side by
side but you're also going to want to
change it to flex Direction column when
you want your elements to be aligned
vertically here is a very common use
case scenario you want your entire
website to stay the same everything is
aligned vertically but you also want to
Center everything horizontally then you
would go to the body and apply display
Flex Flex Direction
column and and align items
Center and with that every element will
automatically be centered
horizontally all right let's get back to
our starting point display Flex there
are a few more simple flexbox properties
before it gets complicated the Gap
property will create a gap between our
items this property is very simple and
you no longer need to use margins inside
a flexbox layout for example let's give
our boxes a gap of 20 pixels and as we
can see now every box has a nice little
Gap in
between the flex wrap property can make
your flexbox layout responsive using
only one line of code you either have
wrap or no wrap if you use flex wrap you
will get a responsive layout that will
align your items on the next line if we
don't have enough space resizing the
window will show how the elements flow
to the next line when necessary if you
use flex wrap no wrap that will not
happen and instead the boxes will shrink
together
using a flex wrap of wrap will make the
elements flow to the next
line if we want this layout to be
centered using justify content Center
and align item Center we end up with
this layout while the gap between the
first line and the second line is so big
will become clear once we have a few
more boxes so let's say we have nine
boxes in
HTML just add a few boxes and number
them
properly then the flex box layout will
have more line braks when when we use
flx wrap the issue that we are running
into is that we no longer have one main
axis and one cross axis but every line
has its own Main and cross axis in this
case we have three of them the Align
items property will only control the
alignment along each individual cross
axis Flex start puts the boxes at the
start of each cross
axis Flex end at the
end and Center in the
center but now we also need another CSS
property to control the alignment of all
the lines together for that we use align
content align content has a default
value of space around and this is why
the gaps between the lines are so
big we can also apply space between or
space evenly to change
that and of course we can also use the
basic values Flex start Flex end and
Center so the difference between align
content and align items is align items
will control the alignment along the
cross axis of every flexbox line
individually and align content will
control the alignment of all lines
together ultimately the perfectly
centered layout in flexbox is when you
Center all three of these properties and
wrap the elements automatically when
necessary justify content Center align
item Center and align content Center by
the way when we have a layout like this
where are horizontal gaps and vertical
gaps then you can actually split the Gap
property into two different properties
row Gap and column Gap you can use these
to apply different values for the
horizontal and vertical gaps let's say
column Gap is 10 pixels and row Gap is
20 pixels this way we applied different
values for the horizontal and vertical
gaps but most likely you will not need
that and just use the normal Gap
property to control both at the same
time these properties are not so
important on flexbox but they will
become interesting when you have more
complex layouts in Grid later in the
course by now you should have a good
understanding of alignment and flexbox
using these flexbox properties and their
different combinations of values you can
create any alignment possibility you
want and of course if you don't know by
now you can also use flexbox in every
other HTML element as well it does not
have to be the body for example a little
thinking exercise for beginners if we
want to Center the numbers inside the
boxes which are currently at the top
left corner how would you do that how
can you Center the numbers inside the
boxes pause the video and try it out
yourself
the answer is pretty straightforward we
do the same thing as earlier but now
Inside the Box selector display Flex to
enable flexbox justify content center
for the main axis and align item center
for the cross AIS and this way we
centered the numbers inside the
boxes obviously you can use all the
different combinations we talked about
with black star and flex and here as
well now let's move on to something very
powerful in flexbox you don't always
have to wrap elements in Flex box you
can also resize them responsively so our
next goal is this layout where the boxes
grow and drink
responsively to do that let's go back to
our layout of five boxes in HTML so
remove a few boxes so that we have five
boxes again in CSS we remove any Flex
box properties except display flex and
gap of 10 pixels this is as simple as it
gets now since we have no flex rep
applied the boxes will be resized
automatically if the viewport gets too
small this Behavior can be specified
using Flex shrink and interestingly this
is something that you apply on the flex
items not on the flex container inside
the boxes we can apply a flex rink of
zero for example this will prevent the
shrinking of the boxes they can no
longer be resized and will overflow the
container this is also the case for
every non-flex box layout when you have
the problem of overflowing elements like
this then consider using Flex box to
either wrap the elements to with the
next line or enable flexx rink with a
value of one to make them shrink
automatically but remember Flex rink of
one is the default value you can imagine
this property like a switch that you can
turn on and off now when we have Flex
rink applied we can see how the boxes
resize automatically currently we are
addressing every box the same way using
their class so every box has the same
Flex rink value but you can also use
different Flex rink values on each item
so in HTML I give the first box an ID
box one I want to style this one
differently when I address this box in
CSS I could give this box a flex ring of
zero for example and the other ones
still have a flex ring of
one this will result in this Behavior
every element rings when necessary
except the first one it will stay the
same you could use this intentionally if
you don't want specific elements to
shrink for example if you don't want to
distort an image or icon then it is
pretty useful to disable Flex ring on
that element now Flex rink is pretty
useful but actually what I use way more
often is its counterpart Flex grow Flex
grow enables elements to grow meaning to
stretch along the main axis its default
value is zero so elements do not grow
per default but once you enable it Flex
grow one all the flex items try to fill
out the empty space inside their parent
element this means if there's more empty
space the elements will be bigger they
grow Flex grow tries to fill out all the
available space inside the parent
element and of course you can address
specific elements and apply a different
grow behavior let's say for the boxes
the flex grow is zero so they cannot
grow but box number one can
grow and as you can see we end up with
this effect where only the first element
will grow I used this exact behavior
when I developed the to-do application
here the to-do text grows as much as
possible while the checkbox the delete
button and all the other elements should
not be able to grow this is is a very
useful technique to resize specific
elements depending on the screen size so
you will use it very often when making a
website responsive Flex grow and flex
rink are not only a Boolean that you can
turn on and off but they also work as a
multiplier you can assign even higher
numbers than one they only Mak sense if
they are compared with each other for
example let's give the boxes a flex grow
of one and the first box a flex grow of
five now every element has the ability
to grow but the first one does it five
times faster this El element will be
bigger than the others but every element
can potentially grow so you can
basically apply different grow values to
control how much of the empty space they
should fill this does not mean that this
box is five times bigger as we can see
per default they are all the same size
but only when there's new empty space to
fill out then this element will Reserve
five times more of that new space than
the other elements and the same thing
can be done for Flex shrink now the
first box shrinks five times faster than
the other
and of course you can address every
element on its own and apply a different
value for Flex grow and flex rank but I
never had a situation where this
specific feature was being used since
most times you just want to turn on and
off the grow and Shrink ability for the
elements in a balanced way where they
all behave the same way this whole
system of flex grow and flex rink
becomes even more powerful when you
combine it with minimum and maximum
sizes such as minwidth and Max width
because then you can Define where the
flex rink and flex grow should stop
you can say my boxes should be able to
grow Flex grow of one but they should
not become bigger than 300 pixels each
Max with 300
pixels now the elements grow grow grow
grow grow up to the point where they
reach the maximum size and the same for
Flex shrink they can shrink but only
until they reach a minimum width of
let's say 100
pixels this will make them shrink in the
browser as expected but once they reach
that size of 100 pixels the elements
will overflow
and of course overflowing elements is
something that you should avoid but
sometimes your elements should not get
any smaller and need a minimum width to
solve the overflowing problem remember
that earlier we talked about Flex wrap
we can't combine Flex rink and flex wrap
by just using a media query normally we
use flex rink and flex wrap is disabled
with no wrap but once the screen size
gets too small and the minwidth causes
the element to overflow then we apply a
flex wrap of wrap and the element wraps
to the next line and this is a beautiful
example of how easy it can be to make
your website responsive you just use
flex shrink and once you don't want it
to shrink anymore then you use a flex
wrap a special feature of flexbox that I
don't really see that often being used
is the Align self property this property
works just as align items but you use it
on the flex items that means let's say
we have an align items of flex start and
for some reason we want to isolate the
first box and apply something else that
is not Flex start a line self of flex
end for example this will position only
the first box at Flex end and everything
else stays Flex start of course Center
is also possible so you can use this
property to align self one item
differently on the cross axis but
unfortunately I have not found a similar
flexbox property for the main axis let's
say we have a general Justified content
of flex m and we want the first item to
be Flex start it's only logical to
assume that the property justify self
works the same for the main axis but
unfortunately it doesn't since justify
self is actually a property that you use
in CSS grid as you are going to learn
later in the course if you want to
achieve the desired layout where only
the first element is on the left side
and every other element is on the right
then you would use the old school
solution of margin right Auto this is a
very useful technique for navigation
bars here you want your company logo on
the left side and everything else on the
right side so just use margin right Auto
now we already know a lot about CSS
flexbox layouts but before we dive into
grid layouts let's summarize the key
takeaways of flexbox you can position
everything anywhere inside a flex
container if you consider the main and
cross axis and their properties justify
content and align items you can wrap
elements to the next line using Flex
wrap of wrap you can also resize
elements using Flex grow and flex rink
and apply different values for each
element if that is what you want
combining all of that with minimum and
maximum sizes and media queries you can
already achieve most layouts that you
have in mind but if you want to create
more complex layouts or you just want to
simplify your code then let me introduce
CSS grid because there are actually
things that are easier in Grid and work
with even fewer lines of code here is a
common situation how to Cent a div an
experienced flexbox guy would say just
use display Flex justify content Center
and Aline items Center and that's fine
but a grid layout guy would say hold on
three lines of code I can do it in two
display grid Place content center now if
you want to learn CSS Grid in flexbox in
a practical way by building Advanced
projects like this learning page that
uses modern flexbox and grid sections
then I strongly recommend that you get
our HTML and CSS complete course using
the first link in the video description
my name is Fabian and this was coding to
go the channel where you the most
relevant coding Concept in just a few
minutes