Introducing the usage and properties of flex

This article introduces the usage and properties of flex

This is an adaptive 3-column box

<div class="flex">
  <div style="background-color:red;">红色</div>
  <div style="background-color:blue;">蓝色</div>  
  <div style="background-color:green;">绿色</div></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 has 3 attribute values

flex-grow specifies the amount that the project will expand relative to other flexible projects.

Red

Blue

Green

##

<div class="flex1">
  <div style="background-color:red;">红色</div>
  <div style="background-color:blue;">蓝色</div>  
  <div style="background-color:green;">绿色</div></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>

As in the above example, when the width of the parent container

is greater than the sum of the widths of

child elements, it is triggered because

flex-basis is set to 100px

The width of flex is

400px

, and the total length of the three doms inside is set to 300px; that’s 100 more remaining widths.

The expansion amount of the first child element: (1/(1+2+3))*100, which is approximately equal to 16px;

The expansion amount of the second sub-element: (2/(1+2+3))*100, which is approximately equal to 32px;

The expansion of the third sub-element: (3/(1+2+3))*100, which is approximately equal to 48px;

# are respectively

flex-

shrink

Specify the amount that the item will shrink relative to other flexible items. Red

Blue

Green

##

<div class="flex2">
  <div style="background-color:red;">红色</div>
  <div style="background-color:blue;">蓝色</div>  
  <div style="background-color:green;">绿色</div></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>

As in the above example, when the width of the parent container is less than the sum of the widths of child elements, it is triggered

because flex-basis is set to 200px

The width of flex is 400px, and the total length of the three doms inside is set to 600px; Then the remaining width is 200px less.

Because the amount of shrinkage has been set, it requires 200*1+200*2+##200*3=1200;

#So the width of the first sub-container is 200-(200*1/1200)*200=166px

#So the width of the second sub-container is 200-(200*2/1200)*200=134px

#So the width of the third sub-container is 200-(200*3/1200)*200=100px

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

When "flex -basis" is equal to 0 in the "flex" attribute, "flex items" will allocate all the space of the container (because the sum of the flex basis values ​​of each item is equal to 0, the remaining space is equal to the width of the container minus the flex basis value of each item) , that is, minus 0, and the final remaining space value is equal to the width of the container), so you can use this feature to define "flex: n" for each sub-item to proportionally divide the total width of the container

Light green

= Support

• Red
= Not support

• pink
= Partial support
##Values

IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome##Basic Support6.0-10.0-webkit-21.0+-webkit--webkit-9.0+

2.0-21.04.0-20.0	6.0	15.0+		6.0-6.1	2.1-4.318.0-19.0		11.0+	22.0+
		6.1+	17.0+	7.0+-webkit-	4.4+	20.0+-webkit-		29.0+9.0+
			28.0+

The above is the detailed content of Introducing the usage and properties of flex. For more information, please follow other related articles on the PHP Chinese website!