Zusammenfassung der Flexbox-Lernerfahrung

Flex-Syntax

Elemente, die das Flex-Layout übernehmen, werden als Flex-Container (Flex-Container) oder kurz „Container“ bezeichnet. Alle seine untergeordneten Elemente werden automatisch zu Containermitgliedern, sogenannten Flex-Elementen (Flex-Elementen), die als „Elemente“ bezeichnet werden. Der

-Container verfügt standardmäßig über zwei Achsen: die horizontale Hauptachse (Hauptachse) und die vertikale Querachse. Die Startposition der Hauptachse (der Schnittpunkt mit der Grenze) wird als Hauptstart bezeichnet, und die Endposition wird als Haupt-Ende bezeichnet; die Startposition der Querachse wird als Querstart und als Endposition bezeichnet heißt Kreuzende.

Elemente werden standardmäßig entlang der Hauptachse angeordnet. Der von einem einzelnen Element eingenommene Raum auf der Hauptachse wird als Hauptgröße bezeichnet, und der von einem einzelnen Element eingenommene Raum auf der Querachse wird als Quergröße bezeichnet.

Attribute auf dem Container

Die folgenden 6 Attribute werden auf dem Container festgelegt:

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction: Das Flex-direction-Attribut bestimmt die Hauptachsenrichtung (d. h. die Richtung, in der Elemente angeordnet sind).

row(默认) | row-reverse | column | column-reverse

Flex-Wrap: Standardmäßig werden Elemente auf einer Linie (auch „Achse“ genannt) angeordnet. Das Flex-Wrap-Attribut definiert, wie die Linie umbrochen wird, wenn eine Achse nicht passt.

nowrap(默认) | wrap | wrap-reverse

Flex-Flow: Das Flex-Flow-Attribut ist die Abkürzung des Flex-Direction-Attributs und des Flex-Wrap-Attributs. Der Standardwert ist row nowrap

justify-content: justify-content-Attribut Definiert die Ausrichtung des Elements auf der Hauptachse.

flex-start | flex-end | center | space-between | space-around

align-items-Attribut: Das align-items-Attribut definiert, wie Elemente auf der Querachse ausgerichtet werden.

flex-start | flex-end | center | baseline | stretch

align-content: Das align-content-Attribut definiert die Ausrichtung mehrerer Achsen auf der Querachse. Wenn das Element nur eine Achse hat, hat diese Eigenschaft keine Auswirkung

flex-start | flex-end | center | space-between | space-around | stretch

Eigenschaften für das Element

Die folgenden 6 Eigenschaften werden für das Element festgelegt:

order

flex-grow

flex-shrink

flex-basis

flex

align-self

order: Das Attribut order definiert die Reihenfolge, in der Elemente sortiert werden. Je kleiner der Wert, desto höher die Rangfolge. Der Standardwert ist 0.

Flex-Grow: Das Flex-Grow-Attribut definiert das Vergrößerungsverhältnis des Elements. Der Standardwert ist 0, d. h. wenn noch Platz vorhanden ist, wird es nicht vergrößert.

Wenn alle Elemente eine Flex-Grow-Eigenschaft von 1 haben, teilen sie den verbleibenden Platz (falls vorhanden) gleichmäßig auf. Wenn die Flex-Grow-Eigenschaft eines Elements 2 ist und die anderen Elemente alle 1 sind, nimmt ersteres doppelt so viel verbleibenden Platz ein wie die anderen Elemente.

Flex-Shrink: Das Flex-Shrink-Attribut definiert das Schrumpfungsverhältnis des Artikels. Der Standardwert ist 1, d. h. wenn nicht genügend Platz vorhanden ist, wird der Artikel verkleinert.

Wenn die Flex-Shrink-Eigenschaft aller Elemente 1 ist und nicht genügend Platz vorhanden ist, werden sie alle proportional verkleinert. Wenn die Flex-Shrink-Eigenschaft eines Elements 0 und die der anderen Elemente 1 ist, wird ersteres nicht verkleinert, wenn nicht genügend Platz vorhanden ist.

Flex-Basis: Das Flex-Basis-Attribut definiert die Hauptgröße des Elements, bevor überschüssiger Platz zugewiesen wird. Der Browser verwendet dieses Attribut, um zu berechnen, ob auf der Hauptachse zusätzlicher Platz vorhanden ist. Der Standardwert ist auto, was der Originalgröße des Projekts entspricht.

flex-basis: <length> | auto; /* default auto */

Es kann auf denselben Wert wie das Attribut width oder height (z. B. 350 Pixel) eingestellt werden, dann nimmt das Element einen festen Platz ein.

flex: Das Flex-Attribut ist die Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis. Der Standardwert ist 0 1 Auto. Die letzten beiden Eigenschaften sind optional.

Dieses Attribut hat zwei Verknüpfungswerte: auto (1 1 auto) und none (0 0 auto).

Es wird empfohlen, dieses Attribut zuerst zu verwenden, anstatt drei separate Attribute separat zu schreiben, da der Browser die relevanten Werte ableitet.

align-self: Das Attribut align-self ermöglicht die Ausrichtung eines einzelnen Elements anders als andere Elemente und kann das Attribut align-items überschreiben. Der Standardwert ist auto, was bedeutet, dass das align-items-Attribut des übergeordneten Elements erbt. Wenn kein übergeordnetes Element vorhanden ist, entspricht dies der Dehnung.

align-self: auto | flex-start | flex-end | center | baseline | stretch

Layout

Rasterlayout

1 Grundrasterlayout

Das einfachste Rasterlayout ist die gleichmäßige Verteilung. Das Element kann auf Flex eingestellt werden:1

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

2 Prozent Layout

Die Breite eines bestimmten Rasters ist ein fester Prozentsatz, und der verbleibende Platz wird gleichmäßig auf die anderen Raster verteilt.

Legen Sie die Breite fest: Prozentsatz; oder Flex: 0 0 Prozent; für Elemente, die Prozentsätze erfordern, und legen Sie Flex fest: 1 für automatisch zugewiesene Elemente;

Demo ansehen

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="flex 圣杯布局">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body class="HolyGrail">
  <header>header</header>
  <p class="HolyGrail-body">
    <main class="HolyGrail-content">content</main>
    <nav class="HolyGrail-nav">left nav</nav>
    <aside class="HolyGrail-ads">right ad</aside>
  </p>
  <footer>footer</footer>
</body>
</html>

*{
  margin: 0;
}
.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  text-align: center;
}

header,
footer {
  flex: 0 0 40px;
  background-color: #ccc;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
  background-color: #0f0;
  
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
  background-color: #00f;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
  background-color: #f00;
}

Wenn es sich um einen kleinen Bildschirm handelt, werden die drei Säulen des Torsos automatisch zu vertikalen Stapeln.

4 Fließendes Layout

@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

Die Anzahl der Elemente in jeder Zeile ist festgelegt und wird automatisch in Zeilen unterteilt.

Kompatibel

.parent {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}

Das obige ist der detaillierte Inhalt vonZusammenfassung der Flexbox-Lernerfahrung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!