Flexbox

Mögliche Container:

• div
• p
• h1, .... h6
• ul
• ol
• body

Achtung: Elemente mit festen Größen brechen aus den Rahmen aus (lange Wörter, Bilder, Festgrößen durch die Einheiten bei Größenangaben wie px, cm, ...) !

Ausgangslage

Die div-Boxen A, B und C werden innerhalb des DIV Containers verteilt:

Wichtige Aufteilungen mit dem Boxmodell

Ausrichten aktivieren

display: Die div-Elemente sind nicht mehr standardgemäß untereinander verteilt. Diese können innerhalb des Bereichs ausgerichtet und verteilt werden. Solange nichts anderes eingestellt ist, werden die Elemente einzeilig (!!) linksbündig verteilt.
Der display-Wert heißt: [flex]

.alles_in_Box_ausrichten_und_verteilen_aktivieren {
    display: flex;
    }

Verteilung der Boxen festlegen

flex-direction: Ausrichtung horizontal [column] oder untereinander [row]. - verbunden mit media-Query - ideal für kleine Bildschirme :-)

flex-wrap: Umbruch innerhalb des Containers möglich sonst fließen die Boxen aus dem Container hinaus! [nowrap] [wrap]

Jetzt sind mit Absicht zuviele Container zu sehen, das Ausrichten und Verteilen wurde wie oben aktiviert!

.alles_in_Box_ausrichten_und_verteilen_aktivieren {
    display: flex;
    }

Jetzt sind mit Absicht zuviele Container zu sehen:

        .linksbündig_ausrichten_und_verteilen {
            display: flex;
            flex-wrap: wrap;
        }

Attribute zum Ausrichten

• justify-content von links nach rechts bzw horizontal

• align-content richtet die Zeilen der Höhe nach aus
• Werte:
• flex-start normalerweise linksbündig
• flex-end normalerweise rechtsbündig
• center
• space-around gleichmäßige Verteilung
  
• space-between Verteilung vom Rand beginnend
  

Beispiel: Container mit  justify-content:center

A
B

Ein Text
und noch ein Text
C
Text

 .horizontal_zentrieren {
            display: flex;
            justify-content: center;
            }

Beispiel: Container mit  justify-content:space-between

A
B

Ein Text
und noch ein Text
C
Text

 .horizontal_verteilen {
    display: flex;
    justify-content: space-between;
    }

• align-items richtet unterschiedlich hohe Boxen auf einer Achse aus
• Werte:
• flex-start normalerweise oben
• flex-end normalerweise unten
• center
• baseline von der Grundlinie
  
• strech alle Boxen auf Maximum in der Höhe dehnen

Sonderfall: Eine Box in die Mitte des Fensters

justify-content: center;
align-content: center;

Eine relative Größe der Boxen zueinander festlegen

Attribut: flex-grow:

0 starr

wenn 1, oder 2, 3 dehnt sich die Box aus im Verhältnis zu den anderen Boxen

Beispiel: Box C mit flex-grow:1

 .alles_in_Box_ausrichten_und_verteilen_aktivieren {
    display: flex;
    }
    
 .C_Box_zum_Rand_dehnen {
    flex-grow: 1;
    }
                

dehnbare Box

  flex-shrink: 1; erlaubt schrumpfen
  flex-basis: 75%;

Liste

Liste ungeflext

• Montag
• Dienstag
• Mittwoch

Achtung!! Liste nur geflext im ul-Tag

• Montag
• Dienstag
• Mittwoch

responsiver Einsatz mittels media-Querys

Über die media Eigenschaft können abhängig von Bildschirmeigenschaften und Fenstern die entsprechenden css.Regeln formuliert werden. Dies ist besonders bei dem Flex box Modell mit den relativen Ausrichten und Verteilungsangaben eine praktische Lösung.

Ein Beispiel zur Verdeutlichung:

 <style type="text/css" media="screen and (max-width: 450px)">
        body {  background-color: #7e7187;}
 </style>

 <link type="text/css" rel="stylesheet" href="../format.css">
 <link rel="stylesheet" media="(min-width: 450px)" href="../cssswide.css">

Externe gute Tutorials

Eine Seite um die Möglichkeiten austesten zu können. Wichtig ist für unterschiedliche Größen und vor allem Höhen der Flexboxen zu sorgen um sinnvoll experimentieren zu können:

https://the-echoplex.net/flexyboxes/

Beispielhaft einige Flexboxtutorials:

https://www.on-design.de/tutor/html5_css3/css3/flexbox.html

https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/

https://www.mediaevent.de/css/display-flex.html