Web Development: A Beginners Guid — Lesson 7: Flexing

Not that kind of flexing.

Flexbox is an amazing way to control where things are being displayed on the page. It’s a little bit like Word’s justify feature, with a little bit more control. The diagram below does a good job explaining the basics.

The only difference would be you don’t actually type ‘Justify Left’ and ‘Justify Right’ instead you use the following snippet of code. the ‘|’ stands for OR.

justify-content: center | flex-start | flex-end;

and as you can probably guess the start of the flexbox or ‘flex-start’ is at the start of the div on the far left.

Now onto the tutorial code, add another div below your current one with the class of ‘flex-box’, with some p’s containing numbers… Example below.

Now if you open up your CSS file and add the following code, which will turn it into a red box at 400px wide and 50px height with a display setting of ‘flex’

Try changing the justify-content to ‘center | flex-start | flex-end’ or anything similar. Also try adding an ‘align-items’ and test each of the same options, lastly try adding ‘flex-direction’ and experimenting with ‘row | row-reverse | column | column-reverse’

Feel free to comment with your findings.

This is the basics of Flex Box, I hope you enjoyed this tutorial.

Lesson 8: Positioning