BasicsIntroduction Adding styles Selectors Headings and Text Lists Links Tables Colors Background Box Model Fonts Icons Display Position Overflow Align Images Tool tips Flex
AdvancedShadows Rounded Corners Units Specificity Responsive design Media Queries Grid Animations Psuedo elements CSS variables and functions SASS and SCSS
MiscellaneousCSS Templates CSS Interview QnA
Flex in CSSFlexbox 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
BasicsFlex 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-contentDefault 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 spaceIf 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 propertyflex-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.
- Create the parent container with display set to flex
- All direct children of this parent element will be treated as flex children
- 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.
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 propertyflex 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.
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.
Web development and Automation testing