What is CSS Flexbox?

The flexbox or flexible box model in CSS is a one-dimensional layout model that has flexible and efficient layouts with distributed spaces among items to control their alignment structure ie., it is a layout model that provides an easy and clean way to arrange items within a container. Flexbox can be useful for creating small-scales layouts & is responsive and mobile-friendly.

Properties of Flexbox

1. display

This property is used to align all the elements which are inside the container with proper gap and it also arrange the elements which are in column into row.

2. flex-direction

This property is used to align the elements according to the axes such as x-axis as row and y-axis as a column. These are of four types :-

row - It is used to align the elements into row.
row-reverse - It is used to align the elements in reverse order in row.
column - It is used to align the elements into column.
column-reverse - It is used to align the elements in reverse order in column.

3. flex-wrap

The flex-wrap property specifies whether the flexible items should wrap or not. It means that it can align the elements from top to bottom or bottom to top.

Note: If the elements are not flexible items, the flex-wrap property has no effect.

nowrap(default) - all flex items will be on one line
wrap - flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse - flex items will wrap onto multiple lines from bottom to top.

4. flex-flow

This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. The default value is row nowrap. It has also the same property as flex-direction.

5. justify-content

This property is used to align the content in horizontal direction as needed and it is mandatory to use display: flex before using justify-content.

.container{
    justify-content: start | end | space-evenly | space-between | flex-start | flex-end
}

6. align-items

This property is used to align the content in vertical direction as needed.

.container{
    align-items:  flex-start | flex-end | center | baseline | stretch
}

7. align-content

This property works same as the align-items but the difference is this is used to align the total content in the parent element.

8. gap

This property is used to give gap between all the items in the parent element. we can give row-gap and column-gap manually or can apply gap to all sided using gap property. if there are many element inside any container and we want space between them then don't use margin. Instead of margin use gap. If you want row-gap and column-gap together then we can use simply as we shown below in code.

.container {
  gap: 10px;
  gap: 10px 20px;
  row-gap: 10px;
  column-gap: 20px;
}

Properties for Child Elements

1. order

The order property controls the order in which they appear in the flex container. If we want to arrange the elements in the container then we will use order.

.item {
  order: 5; /* default is 0 */
}

2. flex-grow

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. Note: Negative numbers are not allowed.

.item {
  flex-grow: 4; /* default 0 */
}

3. flex-shrink

This defines the ability for a flex item to shrink if necessary. it just opposite the flex-grow. It also don't accept negative numbers.

.item {
  flex-shrink: 3; /* default 1 */
}

4. align-self

This property is apply to single element and we can align the single element as we want.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Thanks for reading and if this blog is helpful to you then please like and share..

Nitin Soni Blog