Lernen Sie das CSS3-Flex-Layout und wie erstellen Sie ein flexibles Webseiten-Layout?

CSS3-Flex-Layout lernen, wie erstelle ich ein flexibles Webseiten-Layout?

Beim Webdesign spielt das Layout eine entscheidende Rolle. Mit einem guten Layout kann Ihre Webseite übersichtlicher und schöner aussehen und sich an verschiedene Bildschirmgrößen und Geräte anpassen. Das Flex-Layout von CSS3 bietet eine flexible und leistungsstarke Möglichkeit, ein Webseiten-Layout zu erstellen. In diesem Artikel wird vorgestellt, was Flex-Layout ist und wie man es zum Erstellen flexibler Webseiten-Layouts verwendet.

1. Was ist Flex-Layout? ist eine neue Layout-Methode in CSS3, auch bekannt als flexibles Layout. Es basiert auf den Konzepten der Hauptachse und der Querachse und erzielt flexible Layouteffekte durch Festlegen einer Reihe von Eigenschaften für den Container und seine internen Elemente. Durch flexibles Layout können wir problemlos Effekte wie adaptive Elemente, Mittelausrichtung und gleichmäßige Raumverteilung erzielen.

2. Flex-Container und Flex-Item

Im Flex-Layout gibt es zwei wichtige Konzepte, nämlich Flex-Container und Flex-Item. Ein Flex-Container ist ein übergeordnetes Element, das eine Gruppe von Flex-Elementen enthält. Die Eigenschaften und Werte dieses übergeordneten Elements bestimmen, wie die untergeordneten Elemente angeordnet sind. Flex-Elemente sind untergeordnete Elemente, die direkt im Flex-Container enthalten sind.

3. Attribute des Flex-Containers

Anzeige: Flex
1. Dies ist der erste Schritt zur Verwendung des Flex-Layouts. Stellen Sie einfach das Anzeigeattribut des Containers auf „Flex“, um das Flex-Layout zu aktivieren. Die Elemente im Container werden in einer Zeile angeordnet und standardmäßig werden die Elemente in der Reihenfolge sortiert, in der sie im HTML erscheinen.
   
flex-direction
2. Diese Eigenschaft bestimmt, wie Elemente im Container angeordnet werden. Es hat die folgenden optionalen Werte:
   
row: Horizontale Richtung, von links nach rechts angeordnet (Standardwert)
3. row-reverse: Horizontale Richtung, von rechts nach links angeordnet
4. column: Vertikale Richtung, von oben nach unten angeordnet Anordnung
5. Column-Reverse: Vertikale Richtung, von unten nach oben angeordnet
6. justify-content
7. Dieses Attribut bestimmt die Ausrichtung von Elementen auf der Hauptachse. Es hat die folgenden optionalen Werte:
   
Flex-Start: Nahe der Startposition der Hauptachse ausrichten (Standardwert)
8. Flex-End: Nahe der Endposition der Hauptachse ausrichten
9. Center: In der ausrichten Mitte
10. Raum zwischen: Teilen Sie den Raum auf der Hauptachse gleichmäßig auf, das erste und das letzte Element befinden sich nahe an beiden Seiten des Containers.
11. Raum um: Teilen Sie den Raum auf der Hauptachse gleichmäßig auf, den Abstand zwischen jedem Element und dazwischen Das erste und das letzte Element und der Container sind gleich.
12. align-items
13. Dieses Attribut bestimmt den Schnittpunkt der Elementausrichtung auf der Achse. Es hat die folgenden optionalen Werte:
    
flex-start: nahe der Startposition der Querachse ausgerichtet
14. flex-end: nahe der Endposition der Querachse ausgerichtet
15. center: in der Mitte ausgerichtet
16. baseline : entsprechend der Grundlinie des Elements ausgerichtet
stretch: Dehnen Sie das Element, um den Raum quer zur Achse auszufüllen

4. Eigenschaften des Flex-Elements

flex-grow
1. Diese Eigenschaft bestimmt das Ausdehnungsverhältnis des Flex-Elements im verbleibenden Raum. Wenn der übergeordnete Container über zusätzlichen Speicherplatz verfügt, bestimmt der Wert der Flex-Grow-Eigenschaft jedes Flex-Elements den Anteil, der ihnen zugewiesen wird. Der Standardwert ist 0, was bedeutet, dass keine Skalierung erfolgt.
   
flex-shrink
2. Diese Eigenschaft bestimmt das Schrumpfungsverhältnis flexibler Artikel, wenn nicht genügend Platz vorhanden ist. Wenn der übergeordnete Container nicht über genügend Platz für alle Elemente verfügt, bestimmt der Wert der Flex-Shrink-Eigenschaft jedes Flex-Elements den Anteil, um den sie verkleinert werden. Der Standardwert ist 1, was eine gleichmäßige proportionale Schrumpfung bedeutet.
   
flex-basis
3. Diese Eigenschaft bestimmt die anfängliche Größe des Flex-Elements in der Hauptachsenrichtung. Es kann auf einen bestimmten Wert (z. B. Pixel) oder einen Prozentsatz eingestellt werden. Der Standardwert ist auto, wodurch die Größe automatisch basierend auf dem Projektinhalt zugewiesen wird.
   
align-self
4. Diese Eigenschaft bestimmt die Ausrichtung einzelner Elemente auf der Querachse. Es kann die align-items-Eigenschaft des Containers überschreiben. Seine optionalen Werte sind die gleichen wie bei align-items.
   

5. Beispiel für ein flexibles Webseitenlayout

Das Folgende ist ein Beispiel für ein mit Flex-Layout erstelltes Webseitenlayout:

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header {
            width: 100%;
            height: 100px;
            background-color: #ccc;
        }

        .main {
            flex: 1;
            width: 100%;
            background-color: #eaeaea;
        }

        .sidebar {
            width: 200px;
            background-color: #ccc;
        }

        .content {
            flex-grow: 1;
            padding: 20px;
        }

        .footer {
            width: 100%;
            height: 50px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="main">
            <div class="sidebar">Sidebar</div>
            <div class="content">Content</div>
        </div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

Mit dem obigen Code können Sie ein flexibles Webseitenlayout erreichen, bei dem Kopf und Unterseite festgelegt sind Höhen und der mittlere Teil ist in Seitenleiste und Inhaltsbereich unterteilt. Der mittlere Teil kann entsprechend der Höhe des Inhalts flexibel erweitert und verkleinert werden. Durch Festlegen des Flex-Attributs jedes Elements und der Ausrichtung des Containers können Sie ein Webseitenlayout implementieren, das sich an unterschiedliche Bildschirmgrößen anpasst.

6. Zusammenfassung: Das Flex-Layout von CSS3 bietet eine flexible und leistungsstarke Möglichkeit, ein Webseiten-Layout zu erstellen. Durch die flexible Nutzung verschiedener Eigenschaften von Flex-Containern und Flex-Items können Sie problemlos Effekte wie Elementanpassung, Mittenausrichtung und gleichmäßige Raumverteilung erzielen. Durch das Erlernen und Beherrschen des Flex-Layouts können wir Webseiten-Layouts erstellen, die flexibler, schöner und an verschiedene Bildschirmgrößen und Geräte anpassbar sind.

Das obige ist der detaillierte Inhalt vonLernen Sie das CSS3-Flex-Layout und wie erstellen Sie ein flexibles Webseiten-Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!