DEV Community

loading...
Cover image for CSS Flex box : everything you need to know about flex box

CSS Flex box : everything you need to know about flex box

Modern Web
Hello, I am kunaal a fullstack developer.I have a youtube channel "Modern Web" where I teach to make awesome web UI/ UX. Don't forget to checkout my youtube channel
Updated on ・3 min read

Hey, welcome. If you are here, you must have heard about flex box in CSS or you already know what is flex box. But, What exactly Flex box is ?

What is Flex Box ?

Flex box layout provide us a more efficient way to manage items of a particular container. Flex box layout align, shrink items or make space among items by occupying the given space, and make the website responsive.

How to use flex box ?

Well to use flex box you just have to set container element's display property to flex. display: flex; will enable all flex box feature to this container.

.container{
    display: flex;
}
Enter fullscreen mode Exit fullscreen mode

Let see some flex box properties that you can use.

i) Flex-direction : This property is for parent. It allows us to set or change item's direction. Like

Frame 1 (2)

ii) Flex-wrap : This is also for parent element. It allow you to wrap the items and prevent overflow.

Frame 2 (7)

iii) Flex-flow : This is the shorthand for flex-direction and flex-wrap. The default value is :

.container{
    flex-flow: row nowrap;
}
Enter fullscreen mode Exit fullscreen mode

You can see the first value for this property id flex-direction and second is for flex-wrap.

iv) justify-content : It is the most common and frequently used property. It is used to align items in the x axis or horizontal axis.

Frame 3 (1)

v) align-items : It is also a common and frequently used property. It is used to align items in Y axis or vertical axis.

Alt Text

Note : If you have flex-direction: column | column-reverse then justify-content and align-items align items in Y and X axis respectively.

All properties above are for parent element. Now, let's talk about item's property.

vi) flex-grow : As the name suggests flex-grow is used to increase or grow item's width in proportion to occupy the space.

Frame 6 (1)

vii) flex-shrink : Yes, you guessed right. This property aim is opposite to flex-grow. It shrinks or decrease the width of item in proportions to occupy the space.

Frame 7 (1)

viii) flex-basis : This defines the default size of an element before distributing the space among items. You can give fixed lengths like(100px, 20rem) or you can use auto value. auto means take value from width and height property.

Frame 8

xi) flex : This is a shorthand for flex grow, flex shrink and flex basis.

flex: <flex-grow> <flex-shrink> flex-basis>;
Enter fullscreen mode Exit fullscreen mode

x) align-self : This property allow to align item individually. You can set different align position for each item.

Frame 9

So, that's it about flex box. I hope you understood each and everything. If you have doubt or I missed some point let me know in the comments.

Articles you may found Useful

  1. CSS Positions
  2. CSS Media Query

And if you want to improve your webdev skills. You can watch tutorial on Disney+ clone clone by me. If you like, you can subscribe my youtube channel, and follow me on instagram. I create awesome web contents. [Subscribe], [Instagram]

Thanks For reading.

Discussion (4)

Collapse
diegovergarag profile image
Diego Vergara

Thanks a lot Kunaal, this guide it's very helpfull to us, that we are starting on this exiting world of development.

Collapse
kunaal438 profile image
Modern Web Author

I am glad that this article helped you. ☺️☺️

Collapse
piyushmbm45 profile image
Piyush Jain

Thanks for Such a nice post. But align-items default value is stretch so please correct it

Collapse
kunaal438 profile image
Modern Web Author

Oh! I didn't knew about it, thank you for telling. I surely correct this in the post