Display: flex css, displayflexcss

Display: flex css, displayflexcss

This document introduces the usage and attributes of flex.

This adaptive three-column box

<Div class = "flex"> <div style = "background-color: red;"> red </div> <div style = "background-color: blue; "> blue </div> <div style =" background-color: green; "> green </div> <style>. flex {display: flex ;}. flex div {border: 1px solid #000; flex: auto; height: 100px ;}</style>

 

Red, blue, green

 

Flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

Flex mainly includes three attribute values.

Flex-grow specifies the amount of projects that will be extended for other flexible projects.

Red, blue, green

 

<Div class = "flex1"> <div style = "background-color: red;"> red </div> <div style = "background-color: blue; "> blue </div> <div style =" background-color: green; "> green </div> <style>. flex1 {display: flex; width: 400px ;}. flex1 div {border: 1px solid #000; flex: auto; height: 200px ;}. flex1 div: nth-child (1) {-webkit-flex: 1 0 100px; flex: 1 0 100px ;}. flex1 div: nth-child (2) {-webkit-flex: 2 0 100px; flex: 2 0 100px ;}. flex1 div: nth-child (3) {-webkit-flex: 3 0 100px; flex: 3 0 100px ;}</style>

In the preceding example, when the parent container width is greater than the width and

Because flex-basis is set to 100px

The flex width is 100 PX, and the total length of the three dom is set to PX; the remaining width is more.

The extension of the first child element: (1/(1 + 2 + 3) * 100, that is, approximately 16 PX;

The extension of the second child element: (2/(1 + 2 + 3) * 100, that is, about equal to 32px;

Extension of the third child element: (3/(1 + 2 + 3) * 100, that is, approximately 48px;

 

 

Flex-shrink specifies that the project will contract the amount of other flexible projects.

Red, blue, green

 

<Div class = "flex2"> <div style = "background-color: red;"> red </div> <div style = "background-color: blue; "> blue </div> <div style =" background-color: green; "> green </div> <style>. flex2 {display: flex; width: 400px ;}. flex2 div {border: 1px solid #000; flex: auto; height: 100px ;}. flex2 div: nth-child (1) {-webkit-flex: 0 1 200px; flex: 0 1 200px ;}. flex2 div: nth-child (2) {-webkit-flex: 0 2 200px; flex: 0 2 200px ;}. flex2 div: nth-child (3) {-webkit-flex: 0 3 200px; flex: 0 3 200px ;}</style>

In the preceding example, when the width of the parent container is smaller than the width and

Because flex-basis is set to 200px

The width of flex is PX, and the total length of the three dom is set to 600px; the remaining width of PX is missing.

This is required because the number of contracted data has been set.200*1 +200*2 +200*3 = 1200;

Therefore, the width of the 1st sub-container is 200-(200*1/1200) * 200 = 166px.

Therefore, the width of the 2nd sub-container is 200-(200*2/1200) * 200 = 134px.

Therefore, the width of the 3rd sub-container is 200-(200*3/1200) * 200 = 100px.

 

 

 

When "flex-basis" is not 0 in the "flex" attribute (including the auto value, and the scaling reference value equals its content width ), the flex subitem will allocate the remaining space of the container (the remaining space is equal to the container width minus the scaling reference value of each item)

When the flex-basis attribute is less than 0 in the flex attribute, the flex subitem allocates all the space of the container (because the scaling benchmark values of each item are equal to 0, the remaining space equals to the container width minus the scaling reference value of each item, that is, minus 0, and the last remaining space value equals to the container width). Therefore, you can use this feature to define "flex: n to evenly share the total width of the container proportionally.

 

 

• Light Green = supported
• Red = not supported
• Pink = partially supported

Values	IE	Firefox	Chrome	Safari	Opera	IOS Safari	Android Browser	Android Chrome
Basic Support	6.0-10.0	2.0-21.0	4.0-20.0	6.0	15.0 +-Webkit-	6.0-6.1	2.1-4.3	18.0-19.0
	11.0 +	22.0 +	21.0 +-Webkit-	6.1 +-Webkit-	17.0 +	7.0 +-Webkit-	4.4 +	20.0 +-Webkit-
			29.0 +	9.0 +		9.0 +		28.0 +