FlexBox Wizard
FlexBox Wizard
<div class=”box”>
<Section>
<Section> is the parent element, and the divs are the children.
Display: Flex
RESULTS
The space between the elements is a margin that I added in CSS.
RESULTS
Justify-content: flex-end
Justify-content: space-between
Justify-content: space-around
align-items: flex-end
Center a <div>
Now, let’s use what we’ve learned and try to center a <div>.
(It’s better if you go give it a try by yourself first)
HTML
RESULTS
Flex-Direction
Determines how the flex items are arranged
(in a row or a column)
HTML
CSS
RESULTS
With flex-direction: column; the boxes are laid out in a column,
stacking vertically on top of each other.
This is because flex-direction: column; sets the main axis of the
flex container to be vertical.
Other properties:
Flex-direction: column-reverse;
Flex-direction: row
Flex-direction: row-reverse
One more center
RESULTS
Main & Cross Axis
If the main axis is horizontal (e.g., flex-direction: row), then justify-
content will affect horizontal positioning, and align-items will affect
vertical positioning.
Conversely, if the main axis is vertical (e.g., flex-direction: column;),
then justify-content will affect vertical positioning, and align-items will
affect horizontal positioning.
justify-content affects the alignment of flex items along the main axis.
Depending on its value, it can push items to the start, end, or center of
the main axis, or distribute them evenly along the axis.
align-items affects the alignment of flex items along the cross axis. It
determines how items are positioned relative to each other on the
perpendicular axis to the main axis.
Conclusion
Flexbox is a super helpful tool for building websites today.
It makes creating fancy and responsive layouts with CSS
much easier.
Happy coding!
P.S. Feel free to share this e-book with anyone who might be
interested in learning Flexbox. The more the merrier!