The flexible layout of CSS3 is very convenient to use. What is the difference between Flex and Flex-grow?

Flex ratio

For example, if you have a parent div with a width of 700 and a default size of 100 for each child element, what is the actual width of the second and third elements if you give them a flex scale layout of 1:2?

<div style="width: 700px; display: flex"> <div style="width: 100px;" ></div> <div style="width: 100px; flex: 1"></div> <div style="width: 100px; flex: 2"></div> </div>Copy the code

When the div element sets both the width and flex properties, the flex property is the same as the width

Remaining width = parent element width – sum of widths of elements not using flex attributes

Each ratio value = the sum of the remaining width/flex property values

Flex attribute element width = each scale value * Flex attribute value

The flex – turns ratio

<div style="width: 700px; display: flex"> <div style="width: 100px;" ></div> <div style="width: 100px; flex-grow: 1"></div> <div style="width: 100px; flex-grow: 2"></div> </div>Copy the code

When a div element sets the width attribute, the width is affected by the width value

Remaining width = parent element width – the sum of the width of all element divs

Each proportion value = remaining width/(sum of flex-grow property values)

Flex-grow element width = actual width + each proportion value * flex-grow property value