DEV Community

Swastik Yadav
Swastik Yadav

Posted on • Updated on

Understanding The CSS FlexBox - With visual examples.

Flexbox gives you complete control over the boxes' alignment, direction, order, and size. It makes it very easy to build modern web page layouts.

In this post we will explore the most used Flexbox properties.

Container and Items

"Flex" is one of the value of CSS display property.

.container {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode
  • Flex Container: The element with display property set to flex becomes the Flex Container.
  • Flex Items: All direct child of container becomes flex items.

felx container and flex items

Flex container properties

1. Justify Content: Horizontal alignment of items.

Values for Justify-Content.

  • flex-start: Align items at row-start
  • flex-end: Align items at the row-end
  • center: Align items at row center
  • space-between: Space between flex items
  • space-around: Space around flex items

flex-box justify-content values

2. Align Items: Vertical alignment of items.

  • Values for Align-Items are exactly the same as that for justify-content.
  • The difference being Align-Items aligns the items vertically and Justify-Content aligns the items horizontally.

3. Flex Wrap: Create a grid layout
When flex-items row width exceeds the width of flex-container, flex-items flow off the edge of the container.

Flex Wrap has two values:

  • no-wrap: Default value. Flex items flow off the page.
  • wrap: Wraps the flex items on the next line.

flexbox flex-wrap

4. Flex Direction: Row or Column
By default, flex containers align their flex items in a row. You can change the flex container direction with the flex-direction property.

It four values:

  • row
  • row-reverse: Reverses the row
  • column
  • column-reverse: Reverses the column

flex-direction

Justify-Content and Align-Items change their role when flex-direction is set to the column.

flex-direction row v/s column

Flex Items property: Align Self

Align-Self is similar to align-items, the only difference is that align-items is applied on flex-container and align-self is applied on individual flex-item.

  • flex-start
  • flex-end
  • center
  • stretch

flex-items align-self


If you enjoyed this post consider joining my Newsletter, where I share epic weekly content on building your skillset.

Thanks a lot for reading.

Top comments (3)

Collapse
 
afif profile image
Temani Afif

you should probably fix your last figure where you are using self-align instead of align-self

Collapse
 
swastikyadav profile image
Swastik Yadav

Thanks for pointing out.

I will change it soon.

Collapse
 
swastikyadav profile image
Swastik Yadav

Done! Changed it.