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.
Center-Center
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.
Top-Left:
Top-Right:
Bottom-Left:
Bottom-Right:
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.
