Flexbox In CSS

Flexbox In CSS

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.