F L E X B OX A L I G N M E N T & J U S T I F I C AT I O N

<div class="parent">
flex-container
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
flex-item </div>

Default behaviour - no flex applied

parent { When you change the parent to display: flex,

display: flex; the children shrink to the size of the content
} inside them, and stack up next to each other,
making columns

When we declare display: flex, there are two axis.

The main-axis, and cross-axis. We can change
these with flex-direction, but by default the
main-axis is horizontal, and cross-axis is vertical
main-axis (more on flex-direction on the last page of this
cross-axis document).

F L E X B OXS I M P L I F I E D. C O M | TA K E C O N T R O L O F F L E X B O X
 F L E X B OX A L I G N M E N T & J U S T I F I C AT I O N

parent {
display: flex; This takes the available space
justify-content: space-between; on the main-axis, and puts it
} between the children.
100px

33px 33px 33px

parent {
display: flex; This takes the available space
justify-content: space-around; on the main-axis, and puts it
} around the children.
100px

12.5px 25px 25px 25px 12.5px

F L E X B OXS I M P L I F I E D. C O M | TA K E C O N T R O L O F F L E X B O X
F L E X B OX A L I G N M E N T & J U S T I F I C AT I O N

parent {
display: flex; This pushes all the children
justify-content: flex-start; to the start of the main-axis
} (default behaviour)

parent {
display: flex; This pushes all the children to
justify-content: flex-end; the end of the main-axis
}

parent {
display: flex; This centers all the children
justify-content: center; along the main-axis
}

F L E X B OXS I M P L I F I E D. C O M | TA K E C O N T R O L O F F L E X B O X
F L E X B OX A L I G N M E N T & J U S T I F I C AT I O N

parent {
display: flex; The default behavior, causing
align-items: stretch; all elements to have the same
} size on the cross-axis (height,
in the example below)

Lorem ipsum Lorem ipsum quad Lorem ipsum quad Lorem ipsum
dium allo nserisquod dium allo nserisquod
quid qui occum hilArum
quibus dolendam
re nobitis modi cum
expero ex.

parent {
display: flex; All the items will have their
align-items: flex-start; intrinsic (default) size on the
} cross-axis, and align along
the start of that axis.

Lorem ipsum Lorem ipsum quad Lorem ipsum quad Lorem ipsum
dium allo nserisquod dium allo nserisquod
quid qui occum hilArum
quibus dolendam
re nobitis modi cum
expero ex.

parent {
display: flex; All items will be center
align-items: center; aligned along the cross-axis.
}

Lorem ipsum quad

dium allo nserisquod
Lorem ipsum
Lorem ipsum quad quid qui occum hilArum
quibus dolendam Lorem ipsum
dium allo nserisquod
re nobitis modi cum
expero ex.

F L E X B OXS I M P L I F I E D. C O M | TA K E C O N T R O L O F F L E X B O X
F L E X B OX A L I G N M E N T & J U S T I F I C AT I O N

parent {
display: flex; All the items will have their
align-items: flex-end; intrinsic (default) size on the
} cross-axis, and align along
the end of that axis.

Lorem ipsum quad

dium allo nserisquod
quid qui occum hilArum
Lorem ipsum quibus dolendam
Lorem ipsum quad re nobitis modi cum
dium allo nserisquod expero ex. Lorem ipsum

parent {
display: flex; The first line of text for all
align-items: baseline items will align on the same
} baseline.

Lorem ipsum Lorem ipsum quad Lorem ipsum quad Lorem ipsum
dium allo nserisquod dium allo nserisquod
quid qui occum hilArum
quibus dolendam
re nobitis modi cum
expero ex.

parent { main-axis
display: flex; cross-axis
flex-direction: column;
}
The default flex-direction is row. This is on the parent,
so the parent is a row, and the children are columns.
When we declare flex-direction: column, the parent is
a column, and the children become rows.

This also changes the main- and cross-axis, meaning

align-items now works horizontally, and justify-
content now works vertically.

F L E X B OXS I M P L I F I E D. C O M | TA K E C O N T R O L O F F L E X B O X