Offenbar können Sie nur Blockelemente (Inline, Inline-Block, Float, nichts funktioniert) innerhalb eines Flex-Item-Containers haben. Das ist nur komisch und scheint nicht nützlich, es sei denn, ich mache es völlig falsch?
Hier ist der Stift: Ссылка
%Vor%Sie müssen möglicherweise die Höhe des Vorschaufensters erhöhen, damit die Flexbox funktioniert.
Aus Gründen der Klarheit bearbeitet: Ich spreche nicht über die Flex-Elemente selbst, sondern über die Elemente INNERHALB des Flex-Elements. In der obigen Codepage sehen Sie h2 und p umrandet, sie haben die Deklaration float , floaten aber nicht.
Flex-Elemente werden immer als Blöcke gerendert, da Flex-Layout nur in einem blockartigen Layout sinnvoll ist. Es gibt einige Unterschiede zwischen Flex-Elementen und Blöcken auf Blockebene, die in Abschnitten 3 behandelt werden und 4 der Spezifikation, eines davon ist, dass Flex-Elemente auch nicht schwimmen können, wieder, weil dies würde stören Sie das Flex-Layout (und umgekehrt können auch die äußeren Floats nicht in ein Flex-Layout eindringen).
Sie können verschiedene Werte von display auf Flex-Elemente anwenden (und sie zusammen mit display: none ausblenden), aber dies bewirkt nur, dass verschiedene Formatierungskontexte für erstellt werden Kinder der Flex-Elemente, nicht die Elemente selbst.
Dies beinhaltet display: flex , wie Sie demonstrieren; Was dann passiert, ist, dass die Flex-Objekte zu Flex-Containern für ihre eigenen Kinder werden, wodurch diese Kinder Objekte in Ihren verschachtelten Flex-Formatierungskontexten flexibel gestalten. Aus diesem Grund wird das Floaten dieser Kinder nicht funktionieren.
Beachten Sie, dass Sie zum Festlegen eines Flex-Layouts nur display: flex im Flex-Container und nicht die untergeordneten Elemente festlegen müssen. Alle Kinder eines Flex-Containers, die nicht display: none sind, werden automatisch zu Flex-Objekten.
für die Darstellung von Inline-Elementen innerhalb von Flexdisplays gibt es eine andere Lösung, um display: inline-table zu verwenden, aber es scheint nicht, dass es Unterstützung unterstützt, aber Sie können dies umgehen, indem Sie es mit Anthere Div oder etwas
Überprüfen Sie die folgende jsfiddle Ссылка
%Vor%