CSS Flexbox: Ein Überblick

Veröffentlicht am

Da ist sie, die Flexbox. Endlich ein CSS-Werkzeug, das nicht für Designer, sondern für Entwickler entworfen wurde. Endlich kein „Basteln“ mehr! CSS Flexbox: Ein kleiner Überblick.

Wo kann ich mehr erfahren?

  • Einen schönen und ausführlichen Guide gibt es bei css-tricks.com (EN)
  • Auch die Übersicht von selfhtml (DE) ist ganz schön
  • Unter caniuse.com (EN) findet man die aktuelle Browserkompatibilität und einige noch nicht gelöste Bugs der einzelnen Browser

Wofür kann man die Flexbox nutzen?

Der häufigste Gebrauch wird wohl das Aufreihen von Containern sein, z.B. Menüelemente, Angebote, Bilder, etc.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Boxen in einem Wrapper aufreihen</title>

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrapper {
            display: flex;
            flex-flow: row wrap;
        }
        
        article {
            display: block;
            width: 260px;
            height: 150px;
            margin: 10px;
            padding: 20px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <article>
            <header>
                <h4>Überschrift</h4>
            </header>
            <div class="content">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </div>
        </article>

        <article>
            <header>
                <h4>Überschrift</h4>
            </header>
            <div class="content">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </div>
        </article>

        <!-- ... beliebig viele weitere Boxen -->
    </div>
</body>
</html>

Man kann die Box auch verwenden, um Header, Footer oder Content auf die restliche Höhe der Seite auszustrecken:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Header + Content + Footer auf ganzer Höhe ausrichten</title>

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        body {
            display: flex;
            flex-flow: column nowrap;
            min-height: 100vh;
        }

        header {
            padding: 20px;
            background-color: green;
        }

        .content {
            flex: 1;
            padding: 20px;
            background-color: red;
        }

        footer {
            padding: 20px;
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>
    <header>
        Hier die Navigation<br>
        mit mehreren Stufen
    </header>

    <div class="content">
        Hier der Inhalt
    </div>

    <footer>
        Hier noch irgendwas anderes
    </footer>
</body>
</html>

Statt mit position: absolute; und transform: translateXY(); einen Container vertikal und horizontal mittig zu positionieren, kann das auch die Flexbox für uns übernehmen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Eine Box mittig ausrichten</title>

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrapper {
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
            background-color: #CCC;
            width: 100vw;
            height: 100vh;
        }
        
        .content {
            width: 300px;
            height: 200px;
            background-color: red;
            color: white;
        }
        
        img {
            display: block;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <img src="nicht-vorhanden.png" alt="Icon">
            <span>Hier steht Text</span>
        </div>
    </div>
</body>
</html>

Hier eine kleine Hilfestellung für SASS Nutzer

// display as flexbox
@mixin flex-display($direction: row, $wrap: nowrap, $justify: flex-start, $align: stretch) {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: $direction;
  flex-direction: $direction;
  -webkit-flex-wrap: $wrap;
  flex-wrap: $wrap;
  -webkit-justify-content: $justify;
  justify-content: $justify;
  -webkit-align-items: $align;
  align-items: $align;
}

// reset as default flex item
// used on all flex items will fix an error in safari and edge
@mixin flex-item-reset() {
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
}

// stretches an items area to available width
@mixin flex-item-stretch() {
  -webkit-flex: 1;
  flex: 1;
}

// make the body able to use flex stretches
@mixin flex-body-wrapper() {
  @include flex-display(column);
  min-height: 100vh;
}

Einfach am Anfang der SCSS Bibliothek hinzufügen.

Fazit

Das war CSS Flexbox: Ein kurzer Überblick. Da mittlerweile alle Browser die Flexbox unterstützen, sollte diese – meiner Meinung nach – auch vor dem Floating präferiert werden. Sie ist zuverlässig und erlaubt viel mehr Verwendungsmöglichkeiten, als es andere Positionierungen bisher konnten. Wer es einmal verstanden hat, wird es mögen. Und auch Entwickler können der Syntax etwas abgewinnen.

0
Allgemein , , ,

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert