Introduction to FlexBox

Jay Liu
2 min readMar 12, 2021

In the journey of learning the front-end, there is a high chance of encountering various headache problems. For example, you can’t place a button to a specific position, and you may get a headache because of this. When I first started learning front-end development. I also encountered such problems. Today, I’m going to introduce flexbox to help you solve this problem.

Flexbox can help you place some elements in specific locations, and you will need not worry about it anymore. Next, I will use some CSS code to demonstrate the usage of flexbox.

Please look at the picture below and try to place the yellow element in the center of the light brown box.


Here is the CSS code:

First, set the box’s display property to flex.

Then, set the box’s align-items property to center. Vertically.

Finally, set the box’s just-content property to center. Horizontally.





So far I only reveal some basic usage of flexbox. I believe you can explore more usage about flexbox, and use it in your project.

Display: flex

Flex-direction: row | row-reverse | column | column-reverse

align-self: flex-start | flex-end | center | baseline | stretch

justify-content: start | center | space-between | space-around | space-evenly

Please use this website or demo to further explore the usage of flexbox and the code I just showed.