Flexbox ist eine leistungsstarke CSS-Technologie, die eine flexible und effiziente Möglichkeit bietet, das Layout von Elementen auf einer Webseite zu steuern. Manchmal ist es jedoch notwendig, den Flex-Block für ein bestimmtes Element zu deaktivieren.
Deaktivieren eines Flex-Blocks mithilfe der CSS-Eigenschaft
Es gibt mehrere Möglichkeiten, den Flex-Block mit CSS zu deaktivieren. Eine davon ist die Verwendung einer Eigenschaft display mit Wert block. Dies funktioniert, weil die Werte display: block und display: flex sie schließen sich gegenseitig aus.
/* CSS код */.flex-container
Im obigen Beispiel wird die Flex-container-Klasse festgelegt und die display-Eigenschaft auf block festgelegt. Daher wird ein Element mit dieser Klasse den Flex-Container nicht mehr verwenden und verhält sich wie ein normales Blockelement.
Deaktivieren eines Flex-Blocks mithilfe der CSS-Klasse
Eine andere Möglichkeit, den Flex-Block zu deaktivieren, besteht darin, eine Klasse mit einem anderen Wert für die display-Eigenschaft hinzuzufügen. Sie können beispielsweise eine No-Flex-Klasse mit dem Wert display: block hinzufügen und auf ein Element anwenden:
/* CSS код */.no-flex
Nachdem die Klasse "no-flex" auf ein Element angewendet wurde, wird der Flex-Container nicht mehr verwendet, wenn er zuvor verwendet wurde.
Deaktivieren Sie den Flex-Block mit !important
Die dritte Möglichkeit, den Flex-Block zu deaktivieren, besteht darin, die Display-Eigenschaft mit hinzuzufügen !important. Zum Beispiel:
/* CSS код */.flex-container
Verwenden !mit important können Sie alle anderen Stile überschreiben, die für ein Element definiert werden können.
Schlußfolgerung
Das Deaktivieren eines Flex-Blocks in CSS ist eine einfache Möglichkeit, das Verhalten eines Elements zu ändern und die Verwendung von Flexbox zu verweigern. Verwenden Sie die Display-Eigenschaft mit dem Wert block, wenden Sie Klassen an oder fügen Sie sie hinzu !important, um das gewünschte Ergebnis zu erzielen.
Was ist ein Flex-Block in CSS und wie funktioniert er?
Wenn wir eine Eigenschaft anwenden display: flex zum übergeordneten Element wird es flex-Container. Dieser Container enthält alle seine direkten Nachkommen, die wir nennen flex-Elemente. Flex-Elemente können je nach Eigenschaftswert entweder in einer Zeile (horizontal) oder in einer Spalte (vertikal) platziert werden flex-direction.
Wenn flex Elemente innerhalb eines Containers unterschiedliche Größen haben, können wir ihr Verhalten mit einer Eigenschaft steuern flex-grow, das angibt, wie viel Platz jedes Element einnehmen muss. Mit Hilfe flex-shrink wir können angeben, wie die Elemente komprimiert werden sollen, wenn der Container zu klein wird, um alle Elemente aufzunehmen. Wir können die Eigenschaft auch verwenden flex-basis um anzugeben, wie viel Platz für jedes Element zugewiesen werden soll, bevor die flex-grow- oder flex-shrink-Eigenschaft angewendet wird.
Flexbox bietet auch viele andere Eigenschaften und Funktionen, z. B. das Ausrichten von Elementen und das Verwalten des Zwischenraums mit einer Eigenschaft justify-content und align-items. und vieles mehr. Mit diesen Tools können wir eine Vielzahl von Layouts erstellen, die auf verschiedenen Geräten und in verschiedenen Umgebungen gut funktionieren.
