Layouten mit CSS

flexbox

Der neue flexbox Layout Modus macht sich auf, die Art, wie wir Layouts in CSS erstellen neu zu definieren. Unglücklicherweise hat sich die Spezifikation in letzter Zeit sehr verändert. Dadurch wird es in verschiedenen Browsern ganz unterschiedlich umgesetzt. Trotzdem möchte ich ein paar Beispiele zeigen, damit du eine Ahnung hast, was kommen wird. Momentan implementiert einzig Google Chrome die neueste Version des Standards..

Es gibt massenhaft veraltete flexbox Ressourcen überall im Netz. Wenn du mehr über flexbox wissen willst, beginne hiermit um zu lernen wie du erkennen kannst, ob eine Information aktuell ist. Ich habe selber einen ausführlichen Artikel zur neuesten Verion der Syntax geschrieben.

Es gibt noch viel mehr, was du mit Flexbox erreichen kannst. Dies sind nur ein paar Beispiele um dir einen Vorgeschmack zu geben:

Einfaches Layout mit Flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

Flexbox ist so einfach!

</section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</section>

</div>

Originelles Layout mit Flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

Ich werde 200px breit sein wenn es dafür genügend Platz hat und auf 100px zusammenschrumpfen wenn nicht. Aber noch schmaler werde ich nicht werden.

</div>

Ich bleibe unter allen Umständen 200px breit.

</div>

Ich werde 1/3 der restlichen Breite einnehmen.

</div>

Ich werde 2/3 der restlichen Breite einnehmen.

</div>

Zentrieren mit Hilfe von Flexbox

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

<div>

Und schließlich ist es einfach etwas mit Hilfe von CSS vertikal zu zentrieren!

</div>