Verständnis des Flex-Flex-Anbaus, Flex-Shrink und Flex-Basis

Verstehen Sie die Wechselwirkung von CSS-Eigenschaften flex-grow , flex-shrink und flex-basis tief. Wenn wir CSS -Attribute anwenden, passieren viele Dinge hinter den Kulissen. Angenommen, wir haben das folgende HTML:

<div>
  <div>Kind</div>
  <div>Kind</div>
  <div>Kind</div>
</div>

Dann schreiben wir ein paar CSS:

 .PARENT {
  Anzeige: Flex;
}

Tatsächlich wenden wir zusätzlich zu der obigen Zeile des CSS -Code auch implizit eine Reihe von Attributen auf .child -Element an, als ob wir den folgenden Stil selbst geschrieben hätten:

 .Kind {
  Flex: 0 1 Auto; /* Standard Flex -Wert*//
}

Dies liegt daran, dass einige Eigenschaften Standardwerte aufweisen, die von uns überschrieben werden sollen. Ohne den Stil dieser impliziten Anwendungen zu verstehen, kann das Layout sehr verwirrend und schwer zu verwalten.

flex -Attribut ist ein Kurz -CSS -Attribut, das gleichzeitig drei unabhängige CSS -Attribute festlegt. Daher entspricht die obige Abkürzung:

 .Kind {
  Flex-Grew: 0;
  Flex-Shrink: 1;
  Flex-Base: Auto;
}

Abkürzungsattribute bündeln mehrere CSS -Attribute zusammen, sodass es bequem, mehrere Attribute gleichzeitig zu schreiben, genau wie bei background .

Obwohl Abkürzungseigenschaften für Flexbox verwirrend sein können, wird empfohlen, eine Abkürzung zu verwenden, da eine komplexe Wechselwirkung zwischen flex Attribut und seinen Untervoraussetzungen besteht.

Der Standardstil ist sehr nützlich, da wir in den meisten Fällen die Details dieser Flexbox -Eigenschaften nicht kennen müssen. Bei der Verwendung von Flexbox schreiben wir beispielsweise normalerweise wie folgt:

 .PARENT {
  Anzeige: Flex;
  Rechtfertigungsbekämpfung: Weltraum zwischen;
}

Wir müssen uns nicht einmal um Kinderelemente oder die auf sie angewendeten Stile kümmern. Dies ist jedoch nur die Spitze des Eisbergs von Flexbox.

Was ist, wenn wir tief in die Funktionsweise von Flexbox, einschließlich flex-grow , flex-shrink und flex-basis -Eigenschaften arbeiten und wie Sie sie verwenden können, um komplexere Layouts zu erstellen?

Beginnen wir mit dem vereinfachten Überblick und kehren zum Standard flex -Attribut zurück, das auf die untergeordneten Elemente angewendet wird:

 .Kind {
  Flex: 0 1 Auto;
}

Diese Standardstile geben den Kinderelementen an, wie sie sich dehnen und schrumpfen können. Normalerweise verstehe ich diese Abkürzungseigenschaften als:

 /* Wie denke ich über die oben genannten Regeln in meinem Kopf nach*/

.Kind {
  Flex: [Flex-Anfänger] [Flex-Shrink] [Flex-Base];
}

/* oder... */

.Kind {
  Flex: [Maximum] [Minimum] [Idealgröße];
}

Der erste Wert flex-grow stand auf 0, was bedeutet, dass das Element (meistens) nicht erweitert wird. Die Elementgröße hängt von ihrem Inhalt ab. Zum Beispiel:

 .PARENT {
  Anzeige: Flex;
}

Wenn wir den Standardwert flex-grow Attributs von 0 auf 1 ändern:

 .Kind {
  Flex: 1 1 Auto;
}

Anschließend verteilen alle Elemente den Raum des .parent gleichermaßen, jedoch nur, wenn ihr Inhalt gleich lang ist. Dies entspricht:

 .Kind {
  Flex-Grow: 1;
}

Wenn wir wollen, dass eines der Elemente mehr wächst als die anderen, können wir dies tun:

 .Child-Three {
  Flex: 3 1 Auto;
}

/* oder... */

.Child-Three {
  Flex-Grew: 3;
}

flex-shrink ist der zweite Wert in der Abkürzung:

 .Kind {
  Flex: 0 1 Auto; / * flex-shrink = 1 *//
}

flex-shrink gibt dem Browser die Mindestgröße des Elements an. Der Standardwert ist 1, was bedeutet, dass der gleiche Raum immer besetzt ist. Wenn auf 0 gesetzt:

 .Kind {
  Flex: 0 0 Auto;
}

Das Element wird nicht schrumpfen.

flex-basis ist der letzte Wert, der flex Abkürzung standardmäßig hinzugefügt wird, die dem Element angewiesen ist, die ideale Größe aufrechtzuerhalten. Der Standardwert ist auto , was "meine Höhe oder Breite verwendete" bedeutet.

Wenn wir flex-basis auf 1000px einstellen:

 .Child-Three {
  Flex: 0 1 1000px;
}

Wir sagen dem Browser, er solle versuchen, 1000 PX Platz einzunehmen. Wenn es nicht möglich ist, nimmt das Element anhand der anderen Elemente proportional Platz ein.

Wenn wir verhindern wollen, dass das Element schrumpft:

 .Child-Three {
  Flex: 0 0 1000px;
}

Das Einstellen flex-wrap Eigenschaft ändert das Layout:

 .PARENT {
  Anzeige: Flex;
  Flex-Wrap: Wrap;
}

insgesamt:

• Versuchen Sie, die Abkürzung von flex zu verwenden.
• Denken Sie bei der Verwendung von Abkürzung an die maximale, minimale und ideale Größe.
• Der Elementinhalt wirkt sich auch auf die Funktionsweise dieser Werte aus.

Das obige ist der detaillierte Inhalt vonVerständnis des Flex-Flex-Anbaus, Flex-Shrink und Flex-Basis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!