April 7, 2023

Written by Ramzi @slayingthedragon

YouTube link - https://youtu.be/phWxA89Dy94

Codepen link - https://codepen.io/ramzibach-the-styleful/pen/GRXLZEq?editors=1100

https://youtu.be/phWxA89Dy94

During the CSS stone-age developers were creating layouts with floats and positioning until one fateful day Flexbox would be introduced and the world would never be the same.

Flexbox

To use flexbox - we first need a container and some children in our HTML.

<div class="container">
	<div class="item-1">Item 1</div>
	<div class="item-2">Item 2</div>
	<div class="item-3">Item 3</div>
</div>

1.png

Then, in our CSS, we can give the container the display of flex.

.container {
	display: flex;
}

2.png

This created 2 invisible axes, a main axis and a cross axis.