CSS
Flexibles Boxenlayout (Flexbox)

Einführung

Syntax

• Anzeige: Flex;
• Flex-Richtung: Reihe | Zeilenumkehrung | Spalte | Spaltenumkehrung;
• Flex-Wrap: Nowrap | wickeln | Wrap-Reverse;
• Flex-Flow: <'Flex-Richtung'> || <'flex-wrap'>
• Inhalt rechtfertigen: Flex-Start | Flex-Ende | Zentrum | Leerzeichen | Raum um;
• Ausrichtungsartikel: Flex-Start | Flex-Ende | Zentrum | Grundlinie | strecken;
• Inhalt ausrichten: Flex-Start | Flex-Ende | Zentrum | Leerzeichen | Raum um | strecken;
• Reihenfolge: <Ganzzahl>;
• Flex-Grow: <Nummer>; / * default 0 * /
• Flex-Shrink: <Nummer>; / * default 1 * /
• Flex-Basis: <Länge> | Auto; / * default auto * /
• flex: keine | [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]
• align-self: auto | Flex-Start | Flex-Ende | Zentrum | Grundlinie | strecken;

Bemerkungen

Klebrige Fußzeile mit variabler Höhe

Dieser Code erstellt eine klebrige Fußzeile. Wenn der Inhalt das Ende des Ansichtsfensters nicht erreicht, bleibt die Fußzeile am unteren Rand des Ansichtsfensters. Wenn der Inhalt über den unteren Rand des Ansichtsfensters hinausragt, wird auch die Fußzeile aus dem Ansichtsfenster verschoben. Zeige Ergebnis

HTML:

<div class="header">
  <h2>Header</h2>
</div>

<div class="content">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
</div>

<div class="footer">
  <h4>Footer</h4>
</div>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  /* Include `0 auto` for best browser compatibility. */
  flex: 1 0 auto;
}

.header, .footer {
  background-color: grey;
  color: white;
  flex: none;
}

Holy Grail Layout mit Flexbox

Holy Grail Layout ist ein Layout mit einer festen Höhe Kopf und Fußzeile und einem Zentrum mit 3 Spalten. Die 3 Spalten enthalten ein Sidenav mit fester Breite, ein Fluidzentrum und eine Spalte für andere Inhalte wie Anzeigen (das Fluidzentrum erscheint zuerst im Markup). Mit CSS Flexbox kann dies mit einem sehr einfachen Markup erreicht werden:

HTML-Markup:

<div class="container">
  <header class="header">Header</header>
  <div class="content-body">
    <main class="content">Content</main>
    <nav class="sidenav">Nav</nav>
    <aside class="ads">Ads</aside>
  </div>
  <footer class="footer">Footer</footer>
</div>

CSS:

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex: 0 0 50px;
}

.content-body {
  flex: 1 1 auto;
  
  display: flex;
  flex-direction: row;
}

.content-body .content {
  flex: 1 1 auto;
  overflow: auto;
}

.content-body .sidenav {
  order: -1;
  flex: 0 0 100px;
  overflow: auto;
}

.content-body .ads {
  flex: 0 0 100px;
  overflow: auto;
}

.footer {
  flex: 0 0 50px;
}

Demo

Perfekt abgestimmte Knöpfe in Karten mit Flexbox

Heutzutage ist es ein regelmäßiges Muster im Design, die Aufrufe der Aktionen in den darin enthaltenen Karten vertikal wie folgt auszurichten:

Dies kann durch einen speziellen Trick mit der flexbox

HTML

<div class="cards">
  <div class="card">
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p><button>Action</button></p>
  </div>
  <div class="card">
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
    <p><button>Action</button></p>
  </div>
</div>

Zuerst verwenden wir CSS, um die display: flex; anzuwenden display: flex; zum Behälter. Dadurch werden 2 Spalten mit gleicher Höhe erstellt, in denen der Inhalt natürlich fließt

CSS

.cards {
    display: flex;
}
.card {
    border: 1px solid #ccc;
    margin: 10px 10px;
    padding: 0 20px;
}
button {
    height: 40px;
    background: #fff;
    padding: 0 40px;
    border: 1px solid #000;
}
p:last-child {
    text-align: center;
}

Das Layout ändert sich und wird so:

Um die Schaltflächen an den unteren Rand des Blocks zu verschieben, müssen Sie die display: flex; anwenden display: flex; auf die Karte selbst, wobei die Richtung auf column . Danach sollten wir das letzte Element in der Karte auswählen und den margin-top auf auto . Dadurch wird der letzte Absatz an den unteren Rand der Karte geschoben und das gewünschte Ergebnis erzielt.

Finales CSS:

.cards {
    display: flex;
}
.card {
    border: 1px solid #ccc;
    margin: 10px 10px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
}
button {
    height: 40px;
    background: #fff;
    padding: 0 40px;
    border: 1px solid #000;
}
p:last-child {
    text-align: center;
    margin-top: auto;
}

Dynamische vertikale und horizontale Zentrierung (Elemente ausrichten, Inhalt ausrichten)

Einfaches Beispiel (Zentrieren eines einzelnen Elements)

HTML

<div class="aligner">
  <div class="aligner-item">…</div>
</div>

CSS

.aligner {
  display: flex; 
  align-items: center;
  justify-content: center;
}

.aligner-item {
  max-width: 50%; /*for demo. Use actual width instead.*/
}

Hier ist eine Demo .

Argumentation

Beispiele für individuelle Eigenschaften

Alle folgenden Stile werden auf dieses einfache Layout angewendet:

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

wo #container ist die flex-box .

Beispiel: justify-content: center Zentriert auf einer horizontalen Flexbox

CSS:

div#container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

Ergebnis:

Hier ist eine Demo .

Beispiel: justify-content: center Zentriert auf einer vertikalen Flexbox

CSS:

div#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Ergebnis:

Hier ist eine Demo .

Beispiel: align-content: center einer horizontalen Flexbox zentrieren

CSS:

div#container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

Ergebnis:

Hier ist eine Demo .

Beispiel: align-content: center Zentriert auf einer vertikalen Flexbox

CSS:

div#container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Ergebnis:

Hier ist eine Demo .

Beispiel: Kombination zum Zentrieren von beiden auf der horizontalen Flexbox

div#container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Ergebnis:

Hier ist eine Demo .

Beispiel: Kombination zum Zentrieren beider auf vertikaler Flexbox

div#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Ergebnis:

Hier ist eine Demo .

Gleiche Höhe bei verschachtelten Containern

Dieser Code stellt sicher, dass alle geschachtelten Container immer die gleiche Höhe haben. Dies geschieht, indem sichergestellt wird, dass alle geschachtelten Elemente dieselbe Höhe wie das enthaltende parrent div haben. Siehe Arbeitsbeispiel : https://jsfiddle.net/3wwh7ewp/

Dieser Effekt wird dadurch erreicht, dass die Eigenschaft align-items standardmäßig auf stretch wird.

HTML

<div class="container">
  <div style="background-color: red">
    Some <br />
    data <br />
    to make<br />
    a height <br />
 </div>
  <div style="background-color: blue">
    Fewer <br />
    lines <br />
 </div>
</div>

CSS

.container {
    display: flex;
    align-items: stretch; // Default value
}

Hinweis: Funktioniert nicht bei IE-Versionen unter 10

Passen Sie Elemente optimal an ihren Behälter an

Eine der schönsten Eigenschaften von flexbox ist die optimale Anpassung von Behältern an das übergeordnete Element.

Live-Demo

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

CSS:

.flex-container {
    background-color: #000;
    height: 100%;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
}

.flex-item {
    background-color: #ccf;
    margin: 0.1em;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 200px; /* or % could be used to ensure a specific layout */
}

Ergebnis:

Spalten passen sich an, wenn die Bildschirmgröße geändert wird.