Flexbox - a quick introduction

In the flexbox layout system, you declare a parent div with a CSS property display: flex, which allows you to control how you want to position its children elements.

Once you declare display: flex, the div element becomes a flexbox with two axes. The Main axis along with the content are placed with the Cross axis, which is perpendicular to the Main axis. You can use the following CSS properties in the parent flexbox to change the position of child elements (flex items):

• flex-direction: Create the Main axis either horizontally (row) or vertically (column)
• justify-content: Specify how flex items are placed on the Main axis
• align-items: Specify how flex items are placed on the Cross axis
• flex-wrap: Specify how to handle flex items when there is not enough space to display them in a single row

You can also apply some flex properties to flex items, such as:

• align-self: Specify how to place the specific flex item on the Cross axis
• flex: The relative size of the flex item with respect to other flex items (if you have two items with flex: 2 and flex: 1 respectively, the first one will be twice the size of the second one)

All those should sound confusing, but the easiest way to understand flexbox is to use online flexbox playgrounds. Google some flexbox playgrounds available online to experience how different properties of flexbox work. One such playground can be found at http://flexboxplayground.catchmyfame.com/.

To learn flexbox, refer to the following pages:

• Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
• W3Schools: https://www.w3schools.com/css/css3_flexbox.asp
• Flexbox Froggy (a game for learning flexbox): https://flexboxfroggy.com/