Introduction

For a long time many CSS properties like position, display, margin, and other similar tools were being used to set a proper layout but many times these are very frustrating and more importantly time-consuming.

Also, I get tired to position elements on the webpage perfectly using the above CSS properties. Those still work but as I said this can be very frustrating. Are you still struggling with the same? Maybe yes...

So the solution is Flexbox!! Go ahead and see how to use flexbox to position elements.

What we will learn in this blog ?

• What is Flexbox?
• Terminologies
• Flexbox Container
• Orientation
  • flex-direction
  • flex-wrap
  • flex-flow
• Order
• Flexibility
  • flex-grow
  • flex-shrink
• Axis Alignment
  • justify-content
  • align-items
• Important points to remember
• Conclusion

Everything becomes much easier with Flexbox and it is easier to implement the position or setting the perfect layout. So let's dig into some theory and I'll attach codepen snippets so that you can learn and practice on the go.

What is Flexbox? 🤔

Flexbox is a one-dimensional layout method for laying out items of the web pages in rows or columns. It also allows us to align the elements vertically or horizontally.

Flexbox can also be used to change the display direction of the elements and their order too. To understand Flexbox we must know about some terminologies that can be very useful in implementing other flexbox properties so do not skip this one ;)

Terminologies

Flexbox consists of flex container and flex items. Flex container is wrapping for flex items i.e flex items are children of the flex container and they can line up in a row or column.

Have a look at this diagram: Reference

Let's see what each term signifies

• main axis determines the direction in which all the elements are going to be placed by default.

• cross axis is perpendicular to the main axis.

• main start and main end determines where the flex container begins and ends.

• cross start and cross end determines where the cross axis begins and ends.

• main size and cross size determines the size of main axis and cross axis respectively.

Depending on how you want to align the flex items the main axis will become cross axis and vice versa. This affects the way items are arranged i.e vertically or horizontally.

Flexbox Container

Let's create our first flexbox container and flex items 👇

• Here the flex-container has the property display: flex (read till the end to know what is justify-content and align-items), hence all the child elements of the parent container (here flex-container) are aligned in a row by default, and the width of each child will be equal.

• Now, change the display property of the flex-container to block and see the results. What happened ? The child elements are aligned in a column and take up the whole width as assigned before.

Orientation

So, the main use of flexbox is to place the items(flex items) in any direction along any axis. Let's see some flexbox properties related to the orientation of flex items.

1. flex-direction : This property belongs to flex container and is used to determine the direction in which flex items are placed. As seen above, row is the default direction of flex items i.e all the elements are lined up in a row along the main axis.

   • Some possible values of flex-direction

     • row(default)
     • row-reverse
     • column
     • column-reverse

   • Play around with the code below and see how the other values work. 👇

     https://codepen.io/divyanshu-soni/pen/RwVOQQP?editors=1100

2. flex-wrap : This property belongs to flex container . If there are many flex items inside the container, extra elements will shrink to their minimal size (i.e. content size), and then it will flow outside the container.

   • Let's add some flex items and see the behaviour. What happened? The flex items overflowed. To solve this flex-wrap is used.

   • flex-wrap is a property that allows control to overflow and make the extra items move to the new row (if flex-direction: row is applied) or to the column (if flex-direction: column is applied)

   • Some possible values of flex-wrap

     • nowrap(default)
     • wrap
     • wrap-reverse
     https://codepen.io/divyanshu-soni/pen/wvdZyQd

3. flex-flow : This property is a shorthand property that combines flex-direction and flex-wrap.

   • Any of the below code can be used, both have same meanings.

     .flex-container{
     flex-direction: column-reverse;
     flex-wrap: wrap;
     }
     

     or

     .flex-container{
     flex-flow: column-reverse wrap;
     }
     

Order

• This property belongs to flex items. It determines the display order of the items. It's value is a digit and its default value is order: 0.

• Higher value means the element is displayed at the last and lower the value the element is displayed at the first.

• Give the flex items a different class name and try out this property in the code snippets shared above. Syntax will look like below.

.flex-child-1 {
     order: 1;
}

.flex-child-2 {
     order: 0;
}

Note: If the several flex items have the same order value, they will be displayed in the same order as declared in HTML.

Flexibility

We need our flex item that scales to a certain width with its content. The most important property of the flexbox which makes the flexbox so amazing.

1. flex-grow : This is a relative property that depends on the width of flex(child) items. Read some theory from here or else let's understand with an example it will be more clear.

   • Let's say if the width of all the items combined is less than the size of the parent container, then the remaining space will be distributed among them in the proportion of flex: grow factor.

   • Set the different values of flex: grow and play with the code.

   • These are the values set for the example given below 👇

     .flex-child-1 {
     flex-grow: 2;
     }
     
     .flex-child-2 {
     flex-grow: 1;
     }
     
     .flex-child-3 {
     flex-grow: 2;
     }
     
     .flex-child-4 {
     flex-grow: 1;
     }
     

     https://codepen.io/divyanshu-soni/pen/ZEKZxwE?editors=1100

2. flex-shrink : If the width of all the items combined is more than the size of the parent container, you can apply flex: wrap property to make the overflow items move to the row or column or use flex-shrink.

Read more about flex-shrink here

Axis Alignment

1. justify-content : This property allows to distribute the remaining space between items by setting margins and gaps instead of changing item's size like flex: grow and flex: shrink.

   • This property aligns the items along the main axis.

   • Some values of justify-content

     • flex-start(default)
     • flex-end
     • center
     • space-between
     • space-around

   • Try changing the values of justify-content and see the results. 👇

     https://codepen.io/divyanshu-soni/pen/RwVOypB

2. align-items : This property aligns the items along the cross axis.

   • Some values of align-items

     • flex-start(default)
     • flex-end
     • center
     • baseline
     • stretch

   • Try changing the values of align-items and see the results. 👇

     https://codepen.io/divyanshu-soni/pen/jOmRxGE

Some important points to remember about Flexboxes. 📑

• display: flex property is applied to the flex container (i.e parent container), you don't need to set this for flex items.
• Properties like float, display, margin are redundant for flexbox so they will be ignored by the flexbox.

Conclusion ✨

So we learnt many properties of Flexbox and it can be said that Flexbox is a blessing for all web developers. So the properties are applied on either parent container or child items and these properties can be used to align the elements on the main axis or cross axis. Hence, a perfect layout can be created using Flexbox.

Wrapping Up 🍻

Thats all for the flexbox. Hope you enjoyed reading it and please share your feedback in the comments below.

🤝 Let's connect

• Twitter
• Github
• LinkedIn