Flex in CSS

Flexbox is a very important concept in CSS. Please refer this for more details - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax

Basics

Flex model helps you layout the elements on your page in an easy way. The term flex is used because layout is flexible which means that we can make flex items grow or shrink in size. Original width of flex item can be set using flex basis and then from there, it may grow or shrink in size.

min-content and max-content

Default value of flex basis is auto which means it is calculated based on max-content unless width property is set on child item. max-content is the maximum width an element needs to show its content without soft wrapping Opportunities. min-content is the minimum width an element can take to show its content using soft wrapping Opportunities. This property is useful when child needs to shrink.

Positive and negative free space

If container width is 1000px and there are 2 flex items with width of 100px each then we have a free space of 800 px in a container. In this case, flex-grow property values will matter. But if we have 2 flex items with width of 600px each then we have a negative extra space of 200px.In this case, flex-shrink property values will matter.

flex-basis property

flex-basis value specifies the initial size of the flex item before space distribution.

• If flex-basis is auto, check if item has width set on it. If yes, use it. If no, flex-basis will be max-content of flex item
• If flex-basis is 0, then all the space of item is available for distribution

Space distribution algorithm

• Calculate free space based on flex-basis value of flex children
• Then distribute this space among items based on grow or shrink factor. If positive space is available, flex items will grow based on flex-grow property. If negative space is there, flex items will shrink based on flex-shrink property.

To create equal width columns, set flex value to '1 1 0' for flex children. Here what is happening is - since we have flex basis as 0, nothing is laid out in a container and that's why free space available = entire flex container width which is then distributed equally due to grow factor being 1 in all flex items. Just follow 2 steps to create flex layout.

• Create the parent container with display set to flex
• All direct children of this parent element will be treated as flex children

Default behaviour

• width - By default, flex children take only required space meaning they do not grow because default value of flex-grow on flex child is 0. But flex child may shrink if there is negative space because default value of flex-shrink on flex child is 1.
• layout - By default, all flex children will appear side by side horizontally. Because the flex-direction property is 'row' by default. Please note that without flex parent, block elements appear one below the other.

As you can see that first and second box are taking minimal space required. Since there is no width property on flex children, max-content will decide the value of flex-basis.

In below example, I set the "flex:1 1 auto" for first box, thats why the free space was occupied by the first box and second box gets 0 free space.

In below example, I set the width for first (100%) and second box(20%) But since "flex:0 1 auto" is set on flex children, chilrend will shrink and try to fit in the container without overflowing.

To split the space in 2 equal parts among children, You can set flex as "1 1 0"

Alternatively,set the width on children as 50%.

To split the space in 3 equal parts among children, set the width on children as 33%.

flex property

flex property is a shorthand property for flex-grow, flex-shrink, flex-basis Default value of flex is 0 1 auto. Which means that the flex children can not grow but they can shrink from its initial size which is auto by default.

flex wrap

When container runs out of space, we can force the overflowing flex children to render on next line. In below example, flex-wrap is set to "nowrap" and flex is set to "0 0 auto", that's why flex children are not growing, not shrinking but they are overflowing the container.

In below example, flex-wrap is set to "wrap" and flex is set to "0 0 auto", that's why flex children are not growing, not shrinking but they are wrapping to next line.