The Flexible Box Module, or Flexbox, allows us to build responsive website layouts and easily position elements within it.
Flexbox is a one-dimensional layout model, meaning that it only affects one axis - either horizontal or vertical - at a time.
Scroll to start!
The Flexible Box Module, or Flexbox, allows us to build responsive website layouts and easily position elements within it.
Flexbox is a one-dimensional layout model, meaning that it only affects one axis - either horizontal or vertical - at a time.
Let's begin!
In order to use Flexbox, we must first apply display: flex; to the
container (parent) of the items (children) we want to affect.
Let's start by making a <div> element with the class of
"container".
Within the "container" element, let's make 3 more <div>
elements,
each with the class of "item".
1
2
3
Add display: flex; to the
container element above.
.container {
background-color: #e0bbe4;
}
What happens to the items within it?
Flex-Direction