Flexbox
Flexbox is the modern alternative to floats when in comes to building layouts.
It gives us complete control on how the elements are positioned, aligned,
what size they are, and how they behave when the page is resized.
Flex container
<nav class="menu">
<a class="menu__item">Element 1</a>
<a class="menu__item">Element 2</a>
<a class="menu__item">Element 3</a>
</div>
<style>
.menu {
display: flex;
}
</style>
The flex container is an element that defines the flex context - how the elements inside are positioned, the spacing around them and their orientation.
Flex items orientation
Flex items can be organized in rows and columns, with option to reverse them, using the flex-direction prop:
row(default),row-reversecolumncolumn-reverse
.menu {
display: flex;
flex-direction: column;
}
Main axis alignment
Main axis is the main direction of flex items:
- left-to-right for
flex-direction: row, - right-to-left for
flex-direction: row-reverse, - top-to-bottom for
flex-direction: column, - bottom-to-top for
flex-direction: column-reverse,
Valid values:
flex-start(default),flex-end,center,space-around,space-between
.menu {
display: flex;
justify-content: center;
}
See the Pen by maciej-kucharski (@maciej-kucharski) on CodePen.
Cross axis alignment
Cross axis alignment of elements can be defined used the align-items property -
works the same as the justify-content, but in the perpendicular direction.
flex-start(default),flex-end,center,baseline,stretch
See the Pen by maciej-kucharski (@maciej-kucharski) on CodePen.
Tasks
See the Pen by t-i-m-i (@t-i-m-i) on CodePen.
See the Pen by t-i-m-i (@t-i-m-i) on CodePen.
See the Pen by t-i-m-i (@t-i-m-i) on CodePen.