Flexbox

Flexbox is a layout method used for arranging 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 properties to use those are for parent containers and child elements.

Properties for the Parent(flex container)

display

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. This property is set to flex while using flexbox layout model without this other properties won't be working.

.container {

display: flex; /\ or inline-flex */*

}

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.

• 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.

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: column wrap;

}

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.

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

.container {

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

}

• flex-start (default): items are packed toward the start of the flex-direction.

• flex-end: items are packed toward the end of the flex-direction.

• start: items are packed toward the start of the writing-mode direction.

• end: items are packed toward the end of the writing-mode direction.

• left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.

• right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like end.

• center: items are centered along the line

• space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line

• space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.

• space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

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.

.container {

align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;

}

• stretch (default): stretch to fill the container (still respect min-width/max-width)

• flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.

• flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.

• center: items are centered in the cross-axis.

• baseline: items are aligned such as their baselines align.

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;

}

• normal (default): items are packed in their default position as if no value was set.

• flex-start / start: items packed to the start of the container. The (more supported) flex-start honors the flex-direction while start honors the writing-mode direction.

• flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction.

• center: items centered in the container

• space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end

• space-around: items evenly distributed with equal space around each line

• space-evenly: items are evenly distributed with equal space around them

• stretch: lines stretch to take up the remaining space

gap, row-gap, column-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.

Properties for the Children(flex items)

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. If one of the children has a value of 2, that child would take up twice as much of the space either one of the others (or it will try, at least). Negative numbers are invalid.

.item:nth-child(2){
    flex-grow: 2; /* The 2nd item will grow 2 times as the normal children. */  
}

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. Negative numbers are invalid.

.list:nth-child(2){
  flex-shrink: 2; /* The 2nd item will shrink twice that of normal children. */  
}

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: auto | flex-start | flex-end | center | baseline | stretch;
}