kodemaven-portfolio.vercel.

app

10 simple steps to
master CSS
Flexbox:
 kodemaven-portfolio.vercel.app

What is Flexbox?
CSS Flexbox, short for Flexible Box Layout, is a
powerful and efficient layout module that allows
developers to design complex and responsive
web layouts more easily and predictably. It
provides a method for aligning and distributing
space among items in a container, even when
their sizes are unknown or dynamic.

It is one of the most useful tool in CSS styling and

provides flexibility of use with a faster layout
creation, saves development time and increases
creativity.
kodemaven-portfolio.vercel.app

Importance Of CSS Flexbox

Simplifies Complex Layouts: Easily manage
the distribution of space and alignment of
items.

Responsive Design: Automatically adjusts

items to fit different screen sizes and
orientations.

Improved Flexibility: Allows for dynamic

changes in the layout without using floats
or positioning.

Vertical and Horizontal Centering:

Effortlessly center items within a container.
 kodemaven-portfolio.vercel.app

Key Concepts Of Flexbox

The Key concepts of the CSS Flexbox are the
flex container and the flex items

Flex Container: An element that has display:

flex or display: inline-flex. It serves as the
parent element that holds the flex items.

Flex Items: The direct children of a flex

container. These items are laid out along a flex
line, which can be either horizontal or vertical
depending on the container’s flex direction.

Now let’s learn about the 10 steps to

understanding CSS Flexbox:
 kodemaven-portfolio.vercel.app

Step 1: Define a Flex container

This sets the stage for flexible layouts.
For example, consider these:
 kodemaven-portfolio.vercel.app

Result:

The display: flex; property makes the container

a flex container. All direct children of the
container become flex items.

The margin property is used to set the space

between the flexed items for proper visuality.
We will use another property to achieve this as
we learn along.
 kodemaven-portfolio.vercel.app

Step 2: Set the Flex Direction

This controls the direction of your flex items.
The default direction for flexed items is row.
this direction can be set to fit the content
depending on the screen or viewport width.

The flex direction property is for column is

usually set like this:
For example:
 kodemaven-portfolio.vercel.app

Result:
Default orientation (row). Items are aligned horizontally.

The flex-direction is set to

column to align the flex
items on the vertical axis.

This is especially useful for

mobile view layouts.
 kodemaven-portfolio.vercel.app

Other values of flex-direction are:

row-reverse: reverse row from right to left.
column-reverse: reverse column from
bottom to top.
row-reverse (Box 4 - Box 1

column-reverse (Box 4 - Box 1

 kodemaven-portfolio.vercel.app

Step 3: Align Items Along the Main Axis

This helps distribute space between items
horizontally. The different values for justify-
content property are:

flex-start (default): items are packed toward

the start of the flex-direction.
flex-end: items are packed toward the end.
center: items are centered along the line.
space-between: items are evenly distributed,
with the first item at the start and the last
item at the end.
space-around: items are evenly distributed
with equal space around them.
space-evenly: items are distributed so that
the spacing between any two items (and the
space to the edges) is equal.
 kodemaven-portfolio.vercel.app

With the syntax: justify-content: {value}, we have:

value: flex-start value: flex-end

value: center value: space-between

value: space-around value: space-evenly

 kodemaven-portfolio.vercel.app

Step 4: Align Items Along the Cross Axis

This ensures items are alligns properly along the

horizontal axis. The different values for align-
items property are:

flex-start: Align items to the start of the cross

axis.
flex-end: Align items to the end of the cross
axis.
center: Center items along the cross axis.
stretch: Stretch items to fill the container.
This is the default.
 kodemaven-portfolio.vercel.app

With the syntax: align-items: {value}, we have:

value: flex-end
value: flex-start

value: center
 kodemaven-portfolio.vercel.app

Step 5: Set flex-wrap to handle overflow

This property is crucial for managing the layout
of items when there are too many to fit into one
line, especially in responsive designs.

By default, flex items will try to fit into a single

line. If they overflow, they may extend outside
the container, which can cause layout issues.

The flex-wrap property allows you to change

this behavior, enabling items to wrap onto
multiple lines, ensuring that the content stays
within the boundaries of the container and
maintains a more flexible and manageable
layout.
 kodemaven-portfolio.vercel.app

With the syntax: flex-wrap: {value}, we have:

value: nowrap(default) - Items are placed in a single line.

value: wrap

Flex items will wrap

onto multiple lines,
from top to bottom.

value: wrap-reverse

Flex items will wrap

onto multiple lines,
but in reverse order,
from bottom to top.
 kodemaven-portfolio.vercel.app

Step 6: Control Item Growth with Flex

Grow
It defines the ability of a flex item to grow and
occupy available space in the container.

flex-grow is a numeric property that determines

how much a flex item will grow relative to other
items in the flex container when there is extra
space available. This property is a part of the flex
shorthand property (flex-grow, flex-shrink, flex-
basis) but can also be used independently.

It usually has a value of a non-negative number

representing the proportion of available space
the item should take up. The default value is 0,
meaning the item will not grow to fill the
available space.
 kodemaven-portfolio.vercel.app

With the syntax: flex-grow: {number}, we have:

number: 0 (default) - No item is growing.

Box 2 has a flex grow with value of 3

Boxes 2 & 3 has a flex goal with value of 3, while the

rest shares the remaining spaces equally.
 kodemaven-portfolio.vercel.app

Step 7: Control Item Shrinkage with Flex

Shrink
The flex-shrink property in CSS Flexbox is used
to specify how much a flex item should shrink
relative to the rest of the flex items inside the
same container when there is not enough space
available.

The shrinking only occurs when the flex

container is too small to fit all the items at their
natural sizes.

The space reduction is distributed based on the

shrink factor of each item. The flex-shrink
property also takes a non-negative number as it
value.
 kodemaven-portfolio.vercel.app

With the syntax: flex-shrink: {number}, we have:

number: 0 (default) - No item shrinking.

Box 2 has a flex shrink value of 2 - shrinks than others

Box 2 has a value of flexshrink of 2 while box 3 has 3

 kodemaven-portfolio.vercel.app

Step 8: Set Initial Size with Flex Basis

The flex-basis property in Flexbox, determines

the starting point for the size of a flex item. This
is the size the item will take up before any extra
space is added or taken away due to the flex-
grow and flex-shrink properties.

The size is relative to the main axis of the flex

container. If the flex-direction is row or row-
reverse, flex-basis will define the item's width. If
the flex-direction is column or column-reverse,
it will define the item's height.
kodemaven-portfolio.vercel.app

The values of flex-basis property are in:

Length values (e.g., px, em, rem, %, etc.):

These are explicit sizes. For example, flex-
basis: 200px; sets the flex item's base size to
200 pixels.
auto: This is the default value. It means the
size is determined by the item's content or
width/height properties.
content: This value sets the base size to the
size of the item's content. However, it's not
widely supported and should be used
cautiously.
0: This sets the base size to zero, meaning the
item will not take up any space initially and
will rely entirely on the flex-grow property to
get its size.
 kodemaven-portfolio.vercel.app

Step 9: Align Individual Items with Align

Self
The align-self property in Flexbox allows
individual flex items to override the align-items
property of the container. This property is useful
when you want to adjust the alignment of a
single item differently from the others within the
same container.

While align-items sets the alignment for all

items in the container, align-self allows you to
target individual items, giving them unique
alignment properties.
kodemaven-portfolio.vercel.app

The values of align-self property are:

auto: This is the default value, which means

the item will follow the align-items value set
on the flex container.
flex-start: Aligns the item to the start of the
cross axis.
flex-end: Aligns the item to the end of the
cross axis.
center: Centers the item along the cross axis.
baseline: Aligns the item's baseline with the
baseline of the container.
stretch: Stretches the item to fill the
container along the cross axis.
 kodemaven-portfolio.vercel.app

With the syntax on Box3: Align-self: value, we have:

value: flex-start/baseline

value: stretch

value: flex-end

value: center
 kodemaven-portfolio.vercel.app

Step 10: Add Space Between Items with gap

The gap property in CSS Flexbox provides a
convenient way to control the spacing between
flex items.
It eliminates the need for using margins to create
space between items, resulting in cleaner and
more maintainable code.
Single Value: If you provide a single value, it
sets the same space between both rows and
columns in a grid or between flex items in a
single line.
Two Values: If you provide two values, the
first value sets the row gap (vertical spacing),
and the second value sets the column gap
(horizontal spacing).
 kodemaven-portfolio.vercel.app

With the syntax:

Same value between rows and columns
gap: 5px

row gap along vertical axis

gap: 5px 10px

column gap
along horizontal
axis
 kodemaven-portfolio.vercel.app

Combine Properties for Complex Layouts

Now, from what we have learnt so far, let’s create

a responsive layout by mixing and matching
simple Flexbox properties to create an intricate
layouts.

Check these combination of properties

kodemaven-portfolio.vercel.app

Items adjusting based on screen

or viewport width
 Hi There! 👋🏽
Thank you for reading through

Did you enjoy this knowledge?

💼 Follow my LinkedIn page for more work-life

balancing and Coding tips.

🌐 LinkedIn: Oluwakemi Oluwadahunsi

kodemaven-portfolio.vercel.app