Introduction to FlexBox

From: www.qualium-systems.com

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
ZHENGJIAN LIU

ZHENGJIAN LIU

Software engineer experienced in Ruby on Rails, React, and Javascript based programming. zhengjianliu.com