Flexbox in CSS

Flexbox

Flexbox is a layout method used for arranging the items in rows or columns. According to the requirement we can change the direction , width and many more easily. There are already some ways to arrange items using positioning and floats but it is really confusing sometimes because of the complexity of working with them. Flexbox makes this process easy and fast. Flexbox has two types of the properties to use those are for parent containers and child elements.

Properties for Parent Elements

display

This property is used to arrange the items in container in inline or block depending on the value and element. It helps in taking the only space where the content is then using other properties we can set the direction and other properties. This property is set to flex while using flexbox layout model without this other properties won't be working.

.container {
    display: flex;
    /* flexbox properties */
}

flex-direction

This property is used to set the items direction in rows, columns and in reverse order. Check the below code to see more.

direction of the items will be in sequence if we use row and column. else the same effect will be added in row-reverse and column-reverse but the items will be in the reverse order.

flex-wrap

This property is used to set the wrap behaviour without this property items will shrink or expand if size is not compatible to avoid this flex-wrap is used with values as wrap no-wrap wrap-reverse these will determine the wrap behaviour.

values as no-wrap means wrap won't be applied to items and wrap-reverse means the whenever the extra item will be there it will wrap in reverse order means the extra items will towards top side.

flex-flow

This property is a shortcut property for the flex-direction and flex-wrap where the first value will be the flex direction and second will be for wrap.

.container {
  flex-flow: row wrap-reverse;
}

justify-content

This property is used to align the content in horizontal direction as needed. As the values provided to the property the alignment will be done.

align-items

This property is used to align the content in vertical direction as needed. As the values provided to the property the alignment will be done. These two properties are most useful. let's see both properties in action below.

all the values are human understandable we need to play around with code to understand actual working of the values. I have provided all the property values in the code.

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. All the values are given below.

.container{
    align-content: center;
    align-content: flex-start;
    align-content: flex-end;
    align-content: space-around;
    align-content: space-between;
    align-content: stretch;
}

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.

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

we can also use shortcut for row and column by using both gaps in same line as given in above code.

Properties for Child Elements

order

This property is used to set the order of the items by default every items order is set to 0 when we add order to some particular item then the arrangement will be layed according to that for example if we use order as 1 then that item will be arranged after all the 0 ordered items and if we use -1 order will be before the 0 ordered item. We can use the negative and positive numbers in the order property.

.item {
  order: 1;     /* default will be 0 for every item*/
}

flex-grow

This is used to give the ability to grow to item. we can assume as the parts in the available area. If all the items is set to 1 then the area will be distributed equally in the items.

.item1 {
    flex-grow: 1;
}
.item2 {
    flex-grow: 1;
}
.item3 {
    flex-grow: 1;
}
.item4 {
    flex-grow: 1;
}

flex-shrink

This property is used to set the ability to shrink when there is no enough space is available this is exactly opposite to the flex-grow property used to give the shrink values.

.item {
  flex-shrink: 2;
}

align-self

This property is used to override the align-items property for the single element and we can apply the required values to that particular selected items.

.item1 {
align-self: flex-start;
}

Thanks for reading...