Alle untergeordneten Elemente eines Flex-Containers (bezeichnet mit display: flex oder display: inline-flex ) werden automatisch zu Flex-Elementen. Es gibt keine Anzeigeeigenschaft für ein Flex-Element. Stattdessen legen wir einen anderen Wert fest, je nachdem, wie die Kinder des Flex-Elements angelegt werden sollen.
Also, wenn ich display auf X Wert auf Y Element setze (unter Berücksichtigung, dass das Y an einem Flex-Kontext teilnimmt, das ist Y ist ein Flex-Item) kann ich sicher sein, dass ich immer den Flex bekommen werde -item, das sich (in diesem Formatierungskontext im Flex-Container) wie ein Element auf Blockebene verhält?
(Mit anderen Worten, das Y beteiligt sich an einem Blockformatierungskontext, unabhängig davon, ob X = block / inline / table-cell / inline-grid / ... usw., oder?)
Dies:
%Vor%ist gleich (ohne Nebenwirkungen)
%Vor%Die einzige Bedingung dafür, ein Flex-Element zu sein, ist ein In-Flow Kind eines Flex-Containers.
Beachten Sie, dass ein zusammenhängender Text in einem anonymen Flex-Element eingeschlossen werden kann, das keinem Element entspricht. Ein Element-Child eines Flex-Containers ist möglicherweise kein Flex-Element, wenn eines der folgenden Elemente vorhanden ist.
Es ist absolut positioniert
Ein absolut positioniertes Kind eines Flex-Containers nimmt nicht am Flex-Layout teil.
Es hat display: contents
Das Element selbst generiert keine Boxen, sondern seine Children und Pseudo-Elemente erzeugen immer noch Boxen als normal. Für die Zwecke der Box-Generation und Layout, das Element muss behandelt werden, als ob es hatte wurde mit seinen Kindern und Pseudo-Elementen im Dokument ersetzt Baum.
Seine Kinder werden stattdessen die Flex-Elemente (sofern nicht etwas von dieser Liste für sie gilt).
Es hat display: none
Das Element und seine Nachkommen erzeugen keine Boxen.
Es hat box-suppress: discard
Das Element erzeugt überhaupt keine Boxen.
Es hat box-suppress: hide
Das Element erzeugt Boxen wie normal, aber diese Boxen nicht in irgendeiner Weise am Layout teilnehmen und nicht angezeigt werden.
Wenn ein untergeordnetes Element eines Flex-Containers zuvor einen display -Wert hatte, der ein anonymes Elternelement erzeugte, wurde dieses übergeordnete Element zum flexiblen Element anstelle des untergeordneten Elements. Dies hat sich geändert und nun wird das Kind zum Flexelement und kein Elternelement wird generiert.
Abgesehen davon, ja, der display -Wert sollte nicht verhindern, dass ein Element ein flexibles Element ist.
Beachten Sie, dass Flex-Elemente blocked sind, sodass beispielsweise inline-block wird block , inline-table wird table , inline-flex wird flex , etc.
Dies bedeutet, unabhängig von der angegebenen äußeren Display-Rolle das Flex-Element wird immer auf Blockebene sein.
Grundsätzlich ist die display -Eigenschaft, wenn sie in einem Flex-Element verwendet wird, nur nützlich, um ihre inneres Display-Layout-Modell , z dass das Flex-Element ein flexibler Container für seinen Inhalt sein soll.
Ein flex item erstellt einen neuen Formatierungskontext für seine Inhalt. Der Typ dieses Formatierungskontextes wird durch sein festgelegt
displaywie üblich. Allerdings sind Flex-Elemente selbst flex-level -Boxen, nicht Block-Level-Boxen: Sie nehmen am Flex-Formatierungskontext ihres Containers teil und nicht an einer Blockformatierung Kontext.
(Die Terminologie unterscheidet sich ein wenig. Die Display-Spezifikation besagt, dass ein Flex-Element auf Blockebene im Sinne seiner äußeren Display-Rolle ist. Die Flexbox-Spezifikation besagt, dass es nicht Block-Level in dem Sinne ist, in dem es sich befindet ist kein Block eins)