Heim > Artikel > Web-Frontend > Wie lege ich eine Flexbox an? Ausführliches Tutorial

Wie lege ich eine Flexbox an? Ausführliches Tutorial

云罗郡主nach vorne: 2018-10-23 15:23:062813Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Gestaltung der Flexbox-Flexbox. Das ausführliche Tutorial hat einen gewissen Referenzwert. Freunde in Not können darauf zurückgreifen.

Im CSS3-Modell der flexiblen Box können wir das box-flex-Attribut verwenden, um zu definieren, ob die untergeordneten Elemente innerhalb der flexiblen Box über flexiblen Platz verfügen. Wenn das untergeordnete Element über flexiblen Raum verfügt und die Größe der flexiblen Box (übergeordnetes Element) vergrößert oder verkleinert wird, wird auch die Größe des untergeordneten Elements mit flexiblem Raum vergrößert oder verkleinert. Immer wenn die Flexbox über zusätzlichen Platz verfügt, vergrößert sich auch das untergeordnete Element mit dem Flexspace, um diesen Platz zu füllen.

Hinweis:

Der Wert des Box-Flex-Attributs ist eine Ganzzahl oder Dezimalzahl, er darf keine negative Zahl sein und der Standardwert ist 0.

Wenn die Box mehrere untergeordnete Elemente mit definiertem Box-Flex-Attribut enthält, fügt der Browser die Box-Flex-Attributwerte dieser untergeordneten Elemente hinzu und berücksichtigt dann deren jeweilige Werte Für den Gesamtwert verwenden Sie Spalten, um den verbleibenden Platz im Feld zuzuweisen.

Beachten Sie, dass das Box-Flex-Attribut nur dann wirksam ist, wenn die Flex-Box die Breite oder Höhe bestimmt. Das heißt, der Attributwert „Breite“ oder „Höhe“ muss zuerst für das übergeordnete Element definiert werden.

Verwenden Sie flexible Raumeinstellungen, sodass die Gesamtbreite und -höhe der Elemente innerhalb der flexiblen Box immer der Breite und Höhe der flexiblen Box entsprechen. Der Flexraum des untergeordneten Elements wird jedoch erst wirksam, wenn die Flexbox eine bestimmte Breite oder Höhe hat.

Beispiel:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-flex属性</title>
    <style type="text/css">
        body
        {
            display:-webkit-box;
            -webkit-box-orient:horizontal;   /*定义盒子元素内的元素从左到右流动显示*/
            width:200px;
            height:150px;
        }
        #box1
        {
            background:red;
            -webkit-box-flex:1.0;
        }
        #box2
        {
            background:blue;
            -webkit-box-flex:2.0;
        }
        #box3
        {
            background:orange;
            -webkit-box-flex:1.0;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

Der Vorschaueffekt im Browser ist wie folgt:

Wie lege ich eine Flexbox an? Ausführliches Tutorial

Analyse:

Verwenden Sie „ box-“ hier definiert „orient:horizontal;“ die horizontale Anordnung der Unterelemente innerhalb der flexiblen Box und gibt eine Breite von 200 Pixel für die flexible Box an. Danach müssen wir nur noch das Box-Flex-Attribut verwenden, um einen Wert für jedes untergeordnete Element anzugeben, und der Browser berechnet automatisch die Proportionen jedes untergeordneten Elements und teilt die Breite automatisch.

Wie wird die flexible Box der Flexbox angeordnet? Vollständige Einführung in detaillierte Tutorials. Wenn Sie mehr über CSS3-Video-Tutorials erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie lege ich eine Flexbox an? Ausführliches Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:lvyestudy.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie kann man mit CSS einen kreisförmigen Effekt erzielen? (Codebeispiel)Nächster Artikel：Wie kann man mit CSS einen kreisförmigen Effekt erzielen? (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen