Présentation de l'utilisation et des propriétés du flex-tutoriel HTML-php.cn

Présentation de l'utilisation et des propriétés du flex

零下一度

Libérer： 2017-06-28 09:45:54

original

1957 Les gens l'ont consulté

Cet article présente l'utilisation et les propriétés de flex

Il s'agit d'une boîte adaptative à 3 colonnes

<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>

Copier après la connexion

Rouge

Bleu

Vert

flex : flex-grow flex-shrink flex-base |auto|initial|inherit;

flex a principalement 3 valeurs d'attribut

qui sont flex-grow qui spécifie le montant que le projet va développer par rapport aux autres projets flexibles.

Rouge

Bleu

Vert

<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>

Copier après la connexion

Comme dans l'exemple ci-dessus, lorsque la largeur du conteneur parent est supérieure à la somme des largeurs des éléments enfants ,

est déclenché car flex-basis est défini sur 100px La largeur de

flex est de 400px, et la longueur totale des trois doms à l'intérieur est définie sur 300px ; signifie qu'il reste une largeur de 100.

Le montant d'expansion du premier élément enfant : (1/(1+2+3))*100, qui est approximativement égal à 16px ; >

Le montant d'expansion du deuxième sous-élément : (2/(1+2+3))*100, qui est approximativement égal à 32px

L'expansion du troisième sous-élément : (3/(1+2+3))*100, qui est approximativement égal à 48px ; >

sont respectivement

flex-

rétrécissement

précise la quantité de rétrécissement de l'élément par rapport à d'autres éléments flexibles. Rouge

Bleu

Vert

Comme dans l'exemple ci-dessus, lorsque la largeur du conteneur parent est inférieure à la somme des largeurs des éléments enfants,

est déclenché car flex-basis est défini sur 200px

La largeur du flex est 400px, et la longueur totale des trois doms à l'intérieur est définie sur 600px alors la largeur restante est de 200px de moins ; .

Parce que le montant du retrait a été défini, 200*1+200*2+200*3=1200

La largeur du premier sous-conteneur est donc de 200-(200*1/1200)*200=166px

La largeur du deuxième sous-conteneur est donc de 200-(200*2/1200)*200=134px

La largeur du troisième sous-conteneur est donc de 200-(200*3/1200)*200=100px

Quand "flex-basis" n'est pas 0 dans le "flex " (dont la valeur est auto, à ce moment la valeur de référence de mise à l'échelle est égale à la largeur de son propre contenu), "l'enfant flex" allouera l'espace restant du conteneur (l'espace restant est égal à la largeur de le conteneur moins la valeur de référence de mise à l'échelle de chaque élément)

Lorsque "flex -basis" est égal à 0 dans l'attribut "flex", "flex children" allouera tout l'espace du conteneur (car la somme des valeurs de base flexibles de chaque élément est égale à 0, l'espace restant est égal à la largeur du conteneur moins la valeur de base flexible de chaque élément, c'est-à-dire moins 0, la valeur finale de l'espace restant est égale à la largeur du conteneur), vous pouvez donc utiliser cette fonctionnalité pour définir "flex: n" pour chaque sous-élément afin de diviser proportionnellement la largeur totale du conteneur

Vert clair = Pris en charge
Rouge = Non pris en charge
rose = partiellement pris en charge

Valeurs

Firefox

Chrome

Safari

Opera

iOS Safari th>

Android Navigateur

Android Chrome

Support de base

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-
	11.0+	22.0+	29.0+	9.0+	17.0+	9.0+	4.4+	28.0+