DEV Community

yatendra
yatendra

Posted on

CSS Flex-box Quick Guide

If you are a Frontend Developer & facing some hard times mainly with the styling part of your website this article is for you🤗.

The flexbox for a website is mainly used for purpose of layout, and alignment for the children of a container.

Basics

Image description

The figure shown above is the basic building block of how the flex property works in CSS.

  • Flex Container: It is the main container to which CSS display: flex property will be given.
  • Flex Items: Children of the main container which will laid out according to the flex-direction property.
  • Main Size: Total size i.e "width/height" of the main container in whichever is along the main axis.
  • Cross Size: Total size i.e "width/height" of the main container in whichever is along the cross axis.
  • Main Axis: It is the axis along which items are laid out either row/column as in the figure it is in a row. This changes according to the flex-direction property.
  • Cross Axis: It is the axis perpendicular to the main axis.

Properties

  • Properties for flex are divided mainly into two different parts i.e the property for "container" & property for "items".
  • So first here are few container properties for flex.

display
Image description

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

The green background shown in the above image is the main flex container to which the display property of flex is given. It will laid down its children directly.

flex-direction

The default property for flex-direction is row. As shown in first example itself

.container {
  // possible values
  flex-direction: row/column/row-reverse/column-reverse;
}
Enter fullscreen mode Exit fullscreen mode

Image description
Image description
Image description

The flex-direction property will set the main-axis & items are aligned according to the value of direction.

flex-wrap

The default value is "no-wrap" means items will tend to fit itself into a single row or column.

.container {
  // possible values
  flex-wrap: no-wrap / wrap / wrap-reverse
}
Enter fullscreen mode Exit fullscreen mode

Image description

As it's understood from the image the items are squeezed & tend to align & fit themselves into a single row because of default property of "no-wrap".

Image description

Image description

So by setting flex-wrap property with its value as wrap the items are allowed to fit as much available space to them & it will go to next line since wrapping is allowed it will wrap to multiple lines from top to bottom.

By setting it as wrap-reverse it behaves similar to wrap but in opposite direction i.e bottom to top.

justify-content

This property set alignment along main-axis.

.container {
  // possible values
  justify-content: flex-start / flex-end / space-around / space- 
  between / center / space-evenly.
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

Image description

Image description

Image description

Image description

  • flex-start: it is default value items are laid towards starting of flex-direction.
  • flex-end: items are laid towards end of flex-direction.
  • center: items are placed at the center.
  • space-around: items laid down & have equal spaced around them.
  • space-between: there is only space between the items of container & not between the borders of container & the items.
  • space-evenly: items are equally spaced around the edges & between themselves also.

align-items

It sets out alignment along the cross-axis.

Image description

Image description

Image description

.container {
  // possible values
  align-items: center / flex-start / flex-end / baseline / stretch
}
Enter fullscreen mode Exit fullscreen mode

So these are the properties which needs to be used on parent for the flex. You can play around with the given sandbox & learn by changing the values for the above listed properties because learning while making is best practice.

https://codesandbox.io/s/nervous-bassi-ckrh4x?file=/src/styles.css

PS: Feedback's are welcome!! Catch you next time !!!

Top comments (0)