HTML5

FLEXBOX
Lesson 12
LESSON OBJECTIVES

01 03 Create a web page

Understand concept
of Flexbox that utilizes Flexbox

Know the different

02 properties of
Flexbox
HTML5

Do you find it hard to

arrange elements in
HTML and CSS?
FLEXBOX
▪ The Flexible Box Layout Model (flexbox) is a
layout model designed for one-dimensional
content.
▪ The “Flexible Box” or “Flexbox” layout mode
offers an alternative to Floats for defining
the overall appearance of a web page.
▪ Whereas floats only let us horizontally
position our boxes, flexbox gives us complete
control over the alignment, direction, order,
and size of our boxes.
FLEXBOX
FLEXBOX OVERVIEW
▪ Flexbox uses two types of boxes that we’ve
never seen before: “flex containers” and “flex
items”.
▪ The job of a flex container is to group a
bunch of flex items together and define how
they’re positioned.
▪ Every HTML element that’s a direct child of a
flex container is an “item”.
FLEXBOX OVERVIEW
FLEXBOX OVERVIEW

▪ Flex items can be manipulated individually,

but for the most part, it’s up to the
container to determine their layout.
▪ The main purpose of flex items are to let
their container know how many things it needs
to position.
FLEX CONTAINERS
▪ The first step in using flexbox is to turn one
of our HTML elements into a flex container.
▪ We do this with the display property.
▪ By giving it a value of flex, we’re telling
the browser that everything in the box should
be rendered with flexbox instead of the
default box model.
ALIGNING A FLEX ITEM

▪ After you’ve got a flex container, your next

job is to define the horizontal alignment of
its items.
▪ That’s what the justify-content property is
for.
justify-content
▪ The justify-content property aligns flex items
along the main axis of the current line of the
flex container.
▪ It helps distribute extra free space leftover
when either all the flex items on a line are
inflexible, or are flexible but have reached
their maximum size.
justify-content values

▪ Flex-start
• This is the initial
value. Flex items are
packed toward the start
of the line.
justify-content values

▪ flex-end
• Flex items are packed
toward the end of the
line.
justify-content values

▪ center
• Flex items are packed
toward the center of
the line
justify-content values

▪ Space-between
• Flex items are evenly
distributed in the
line.
justify-content values

▪ Space-around
• Flex items are evenly
distributed in the
line, with half-size
spaces on either end.
GROUPING FLEX ITEMS
▪ Flex containers only know how to position
elements that are one level deep (i.e., their
child elements).
▪ They don’t care one bit about what’s inside
their flex items.
▪ This means that grouping flex items is another
weapon in your layout-creation arsenal.
▪ Wrapping a bunch of items in an extra <div>
results in a totally different web page.
CROSS-AXIS (VERTICAL) ALIGNMENT

▪ So far, we’ve been manipulating horizontal

alignment, but flex containers can also define
the vertical alignment of their items.
▪ This is something that’s simply not possible
with floats.
▪ Vertical alignment is defined by adding an
align-items property to a flex container.
Align-items

▪ The align-items property is similar to the

justify-content property, but instead of
aligning flex items in the main axis,
align-items is used to align flex items in the
cross-axis (perpendicular to the main axis).
Align-items values

▪ flex-start
• Flex items are packed
toward the cross-start
of the line.
Align-items values

▪ flex-end
• Flex items are packed
toward the cross-end of
the line.
Align-items values

▪ center
• Flex items are packed
toward the center of
the line
Align-items values

▪ baseline
• Flex items are aligned
such that their
baselines align
Align-items values

▪ stretch
• This is the initial
value. The flex items
are stretched out from
the cross-start to the
cross-end
WRAPPING FLEX ITEMS
▪ Flexbox is a more powerful alternative to
float-based grids.
▪ Not only can it render items as a grid—it can
change their alignment, direction, order, and
size, too.
▪ To create a grid, we need the flex-wrap
property.
flex-wrap

▪ The flex-wrap property controls whether the

flex container is single-line or multi-line,
and the direction of the cross-axis, which
determines the direction new lines are stacked
in.
Flex-wrap values
▪ nowrap
• This is the initial
value. The flex
container is
single-line, and all
items are laid out on
that line, even if it
means they might
overflow the container.
Flex-wrap values
▪ wrap
• The flex items will
wrap onto additional
flex lines if there
isn’t enough room for
them on the first flex
line
Flex-wrap values

▪ wrap-reverse
• Same as wrap, except
the cross-start and
cross-end directions
are swapped
FLEX CONTAINER DIRECTION
▪ “Direction” refers to whether a container
renders its items horizontally or vertically.
▪ So far, all the containers we’ve seen use the
default horizontal direction, which means
items are drawn one after another in the same
row before popping down to the next column
when they run out of space.
Flex-direction
▪ The flex-direction property specifies how flex
items are placed in the flex container, by
setting the direction of the flex container’s
main axis.
▪ This determines the direction that flex items
are laid out in.
▪ The direction of the axes is affected by the
writing mode and directionality of the text
Flex-direction values
▪ row
• This is the initial
value. The flex
container’s main axis
has the same
orientation as the
current writing mode
Flex-direction values

▪ row-reverse
• Same as row, except the
main-start and main-end
directions are swapped.
Flex-direction values
▪ column
• The flex container’s
main axis is rotated so
that the main-start is
at the top and the
main-end is at the
bottom.
Flex-direction values

▪ column-reverse
• Same as column, except
that main-start and
main-end directions are
swapped
FLEX ITEM ORDER

▪ This entire lesson has been about positioning

flex items through their parent containers,
but it’s also possible to manipulate
individual items.
order
▪ The order property controls the order in which
flex items appear within their flex container,
by assigning them to ordinal groups.
▪ It takes a single <integer> value, which
specifies which ordinal group the flex item
belongs to.
▪ Its default value is 0, and increasing or
decreasing it from there moves the item to the
right or left, respectively.
FLEX ITEM ALIGNMENT

▪ We can do the same thing with vertical

alignment.
▪ Adding align-self property to a flex item
overrides the align-items value from its
container
Align-self values
▪ auto
• This is the initial
value.
• A value of auto
computes to the value
of align-items on the
element’s container, or
stretch if the element
has no parent.
Align-self values

▪ flex-start
• The flex item is packed
toward the cross-start
of the line
Align-self values

▪ flex-end
• The flex item is packed
toward the cross-end of
the line
Align-self values

▪ center
• The flex item’s margin
box is centered in the
cross axis within the
line.
Align-self values

▪ baseline
• The element is
positioned at the
baseline of the
container
Align-self values

▪ stretch
• The element is
positioned to fit the
container
FLEXIBLE ITEMS

▪ Flex items are flexible: they can shrink and

stretch to match the width of their
containers.
Flex-grow
▪ The flex-grow property sets the flex grow
factor of a flex item.
▪ A flex grow factor is a <number> which
determines how much the flex item will grow
relative to the rest of the flex items in the
flex container when positive free space is
distributed.
▪ The initial value is zero (0), and negative
numbers are invalid.
Flex-shrink
▪ The flex-shrink property sets the flex shrink
factor of a flex item.
▪ A flex shrink factor is a <number> which
determines how much the flex item will shrink
relative to the rest of the flex items in the
flex container when negative free space is
distributed.
Flex-basis

▪ The flex-basis property takes the same values

as the width property, and sets the flex
basis: the initial main size of the flex item,
before free space is distributed according to
the flex factors.