Flexbox is a CSS 3 web layout model. The flex layout allows responsive elements within a container to be automatically arranged depending on viewport size.
An important property to make a container in FLex is using ' display: flex '.
flex-direction
In a typical scenario whenever we build a website and put elements sets itself as a column element (block element) but if we make a container flex then its children become flex items and are arranged in rows.
before applying the display flex
after applying the display flex
if you want direction in the column then you can set its direction by using ' flex-direction: column '.
justify-content
Aligning content on the main axis using the justify-content property.
flex-start
items are aligned from starting of the flex
flex-end
items are aligned from the end of the flex
space-between
In space-between items are distributed in a way that spaces between items are evenly but there is no space from the start and to the end.
space-around
In space-around spaces are evenly distributed to each item.
space-evenly
In space-evenly spaces are distributed evenly to all the items.
align-items
align-items property used for aligning items on the cross-axis.
align-items: start
align-items: end
align-items: center
flex-wrap
flex-wrap is used for items inside the flexbox, when we are shrinking the website from laptop size view to mobile size view then items come outside of the container and to tackle this we use flex-wrap.
flex-wrap: no-wrap
" flex-wrap: no-wrap " is the default value
flex-wrap: wrap
flex-wrap: wrap-reverse
flex-grow
flex-grow is the flex item property
It is used to fill space in the container, which item gets a higher flex-grow value the more freedom and speed that item gets.
align-self
align-self is used to override the align-items property in the flex item level
here " align-items: end " is set in the container but we are overriding box2 in the center.