Flex Box

By Zahid Javed
Why Flexbox?
Before Flexbox, we were mainly using
floats for layout and for those CSS
developers, we all know the
frustrations and limitations of the old
way -- especially the ability to vertically
center inside a parent. Ugh, that was so
annoying! Not anymore! Flexbox for
the win!
What is Flexbox?

Flexbox is a layout model that allows you to distribute space and align
elements within a container, even when the sizes of the elements are
unknown or dynamic. Unlike traditional layout models, such as floats
and positioning, Flexbox provides a more predictable and maintainable
way to arrange elements in a container, making it ideal for building
complex interfaces.
What is Flexbox?

The main idea behind the flex layout is to give the container the ability
to alter its items’ width/height (and order) to best fill the available
space (mostly to accommodate to all kind of display devices and screen
sizes). A flex container expands items to fill available free space or
shrinks them to prevent overflow.
Basics & Terminology
If “regular” layout is based on both block and inline flow directions, the flex
layout is based on “flex-flow directions”. Please have a look at this figure
from the specification, explaining the main idea behind the flex layout.
Basics & Terminology
Basics & Terminology
HTML Code
CSS Code
Properties for the Parent
Flex Container Properties

display
There are 2 types of flex
container: flex will create a
block level flex container, and
inline-flex will create an inline
level flex container.
Flex Container Properties
display
This defines a flex container; inline or block depending on the given
value. It enables a flex context for all its direct children.
Block vs Inline
Very simply explained, block
element takes up the entire
width of the container. They
look like building blocks
where each block is stacked
on each other. Whereas inline
element only takes up the
space it needs. So they
appear to be in a line, or side
by side of each other
Flex Container Properties

To make an element a flex

container, you need to apply
the `display: flex` or `display:
inline-flex` property to it.
Here are some fundamental
properties that you can apply
to the flex container:
 Flex Container Properties
1. flex-direction: This property determines the main axis direction,
allowing you to set the flow of flex items as either rows or columns.
Common values are `row`, `row-reverse`, `column`, and `column-
reverse`.
2. The flex-wrap CSS property sets whether flex items are forced onto
one line or can wrap onto multiple lines
3. .
Flex Container Properties
4. justify-content: It controls the alignment of flex items along the main
axis. You can set them to be distributed at the start, end, center, or
spaced evenly.

5. align-items: This property aligns flex items along the cross axis. It can
be used to center or align them to the start or end of the container.

6. align-content: When you have multiple rows or columns of flex

items, this property defines how they are aligned in the cross axis.
 1-flex-direction
This establishes the main-axis,
thus defining the direction flex
items are placed in the flex
container. Flexbox is (aside from
optional wrapping) a single-
direction layout concept. Think
of flex items as primarily laying
out either in horizontal rows or
vertical columns.
1-flex-direction

Flexbox operates in a 2 axes

system: a main and a cross axis.
The main axis is your defining
direction of how your flex items
are placed in the flex container.
Determining the cross axis is
very simple, it's in the direction
that's perpendicular to your
main axis.
1-flex-direction
flex-wrap
By default, flex items will all try to fit onto one line. You can change that and
allow the items to wrap as needed with this property.
flex-wrap
By default, flex items will all try to fit onto one line. You can change that and
allow the items to wrap as needed with this property.
flex-wrap
By default, flex items will try to shrink
itself to fit onto one line, in other
words, no wrap. However if you want
the flex items to maintain its size and
have the overflow spread on multiple
lines in the containers, then you can
turn on wrap.
flex-wrap
flex-wrap Output
flex-wrap
flex-flow
This is a shorthand for the flex-direction and flex-wrap properties,
which together define the flex container’s main and cross axes. The
default value is row nowrap.
 flex-flow
So we've learned flex-direction and
flex-wrap. If you understand those 2,
you'll get flex-flow! Because it's just a
shorthand for these two properties.
You can set both properties at the
same time. Or you can just pass one
of them. The default value is row
nowrap. So if you just set one value,
the property that you didn't set will
just take on the default value.
justify-content [row]
• This is the property that sets alignment along the main axis. In this
example, the main axis lies horizontally. In other words, the flex-direction is
set to row.
• This is probably my most used parent property. You just choose the layout
you like and BAM Flexbox automatically does it for you. And it's absolutely
responsive. As you grow or shrink the window width, Flexbox will do the
behind-the-scene calculation and ensure that your chosen layout is
maintained
justify-content [row]
justify-content [row]
 Space-around vs Space-evenly
You might not notice the subtle difference
between space-around and space-evenly. So
let's talk about it. In space-evenly, the
empty space in between the flex items is
always equal. However, in space-around,
only the inner items will have equal spacing
in between each other. The first and last
item will only be allocated half the spacing.
Giving the visual appearance of it being
more spread out.
justify-content [column]
• The main axis can also lie vertically. In that case, flex-direction is set to
column. Here's how the flex items will be aligned in that instance.
 align-items [row]
So justify-content controls how items are laid out on the main axis. What about their
layout in the cross axis? Don't worry, that's where align-items come into play. Remember
the cross axis is always perpendicular to the main axis. So if the main axis is sitting
horizontally, where flex-direction is row. Then , the cross axis is sitting vertically.
align-items [row]

When Height of container 400 px then child also stretch default

align-items [row]
Baseline
The baseline value is a bit tricky. So let's make sure we understand what
that is. Baseline has to do with typography or text. It is the imaginary line
where the text sits. If you have the same font size, you really don't visually
see a difference. However when you have different font sizes, then the text
seems all over the place because the baseline is off. The way to ensure a
uniform baseline where all the different sizes of text can rest on is to use
the baseline value
Baseline
align-items [column]
Now let's take a look at how our flex items are aligned if the cross axis is
sitting horizontally. In other words, flex-direction is column.
align-content
Remember we had flex-wrap where we allow flex items to wrap on
separate lines. Well, with align-content we can control how those row of
items are aligned on the cross axis. Since this is only for wrapped items,
this property won't have any effect if you only have a singular line of flex
items
align-content
align-content
Child Properties
Order
By default, flex items are displayed in the same order they appear in your
code. But what if you want to change that? No problem! Use the order
property to change the ordering of your items
Order
By default, flex items are laid out in the source order. However, the
order property controls the order in which they appear in the flex
container.
flex-grow
The flex grow property is defined by the ability of a flex item to
grow. It accepts a unit less value that will serve to define the
proportion. It helps in understanding the amount of space
available inside the container that can be taken up by the items.

The flex-grow property will be specified as

a single number. Using negative values is
invalid and default values are at 0.
flex-grow
This property specifies how much of the remaining space in the flex
container will be assigned to the item with the flex-grow factor. The main
size is the proportion of the item that is dependent on the flex-direction
value.
The remaining space is the flex container’s size minus the size of all the flex
items together. When all sibling items have the same flex-grow factor, then
all items will receive the same share of remaining space, else it will be
distributed as per the ratio defined by the different flex-grow factors.
flex-grow calculation
Flexbox is great for responsive design. This is where it shines. The flex-
grow property allows our flex item to grow if necessary. So if there is extra
free space in my container, I can tell a particular item to fill it up based on
some proportion. That's pretty nuts! When I was learning CSS, I remember
everything is pretty static..
 Flex shrink
• Flex-shrink is a CSS property that sets the flex shrink factor of a flex
item. When the size of all the flex items is higher than the flex container,
the items shrink to fit as per the flex-shrink property.
• Flex-shrink can be used along with other properties like flex-basis and
flex-grow. Just like flex grow, shrink is also defined using the flex
shorthand. To use the flex-shrink property, use the below syntax:

The flex-shrink property is specified as a

single number and the values can’t be
negative as they will become invalid. Defaults
should be 1.
flex-basis
With the flex-grow and flex-shrink property, we know the flex size
changes. With the flex-basis property, this is where we set its initial size.
You can think of this property as the width of our flex items. So your next
question might be what's the difference between width and flex-basis.
 flex-basis
Of course, you can still use width
and it will still work. The reason
it works is because if you didn't
set the flex-basis, it will default
to the width. So your browser
will always try to find the flex-
basis value as the size indicator.
And if it can't find it, then it has
no choice but to go with your
width property. Don't make the
browser do extra work. Do it the
proper flex way and use flex-
basis.
flex
This is the shorthand for flex-grow, flex-shrink and flex-basis
combined. The second and third parameters (flex-shrink and
flex-basis) are optional. The default is 0 1 auto, but if you set it
with a single number value, it’s like 1 0.
align-self
• This allows the default alignment (or the one specified by align-items)
to be overridden for individual flex items.
• Please see the align-items explanation to understand the available
values.
 align-self
Lastly, we have the align-self
property which is same as
align-items except for the fact
the former is applied to the
flex-child and the latter is
applied to the flex-
container/parent. It accepts all
the same values as align-items
which include the following:
 align-self
Due to the fact, that different flex-children in the same container can
be assigned differently on the cross axis, it allows to create a highly
complex layout.
• stretch (default): expands the element so that it takes entire height
of cross axis
• flex-start: brings all the elements to the beginning/top of flex
parent
• flex-end: moves all elements to endpoint/bottom of the flex parent
• center: moves all elements to center of the flex parent
• baseline: all the elements are aligned based on the baseline of text
inside them which might make them look asymmetrical
Flexbox Cheatsheet Flexbox Game

https://blog.suprabha.me/61-learn-css-by-playing-games

https://www.youtube.com/watch?v=-DNLYk5uzl8&t=444s
Reference
• https://morioh.com/a/d3da54b5b69c/the-complete-guide-to-css-
flexbox
• https://medium.com/@MakeComputerScienceGreatAgain/understan
ding-flexbox-a-comprehensive-guide-992bcd5f04de
• https://blog.suprabha.me/61-learn-css-by-playing-games
• https://www.turing.com/kb/building-a-smart-layout-using-flexbox
• https://www.samanthaming.com/flexbox30/22-flex-grow-calculation/