Herausforderungen
des 21. Jahrhunderts

Kontext

Uneinigkeit über das Provokations- bzw. Depressions-Potenzial verschiedener Frisuren

Vertikale Zentrierung mit CSS

Vertikale Zentrierung

(mit dynamischen Inhalten)

<div class="wrapper">
  <div class="content">
    Hello world!<br>
    How are you today?
  </div>
</div>

Ausgangslage

Ansatz 1

Absolute Positionierung / negative Translation

.wrapper {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

http://jsbin.com/hilaha/edit?html,css,output

Ansatz 2

CSS-Tabellen

.wrapper {
  display: table;
}
.wrapper-inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.content {
  display: inline-block;
}

http://jsbin.com/polime/edit?html,css,output

Ansatz 3

«Ghost element»

.wrapper:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
.content {
  display: inline-block;
  vertical-align: middle;
}

http://jsbin.com/paginu/edit?html,css,output

Ansatz ♛

Flexbox

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

http://jsbin.com/buzuvu/edit?html,css,output

Was kann Flexbox?

Lösung für
Standard-Layout-Probleme

• Vertikale Zentrierung
• Grid-Systeme
• Input Add-Ons
• Sticky footer
• …

Syntax

Beispiel: Grid

.wrapper {
  display: flex;
}

.column {
  flex: 1;
  /* Shorthand für flex-grow: 1 */
}

http://jsbin.com/yoxag/edit?html,css,output

<div class="wrapper">
  <div class="column">
    Column 1
  </div>
  <div class="column">
    Column 2
  </div>
  <div class="column">
    Column 3
  </div>
  <div class="column">
    Column 4
  </div>
</div>

Erweiterung

3 Spalten, mittlere Spalte breiter

.wrapper {
  display: flex;
}

.column {
  flex: 1;
}
.column.var-wide {
  flex: 2;
}

http://jsbin.com/rucama/edit?html,css,output

<div class="wrapper">
  <div class="column">
    Column 1
  </div>
  <div class="column var-wide">
    Column 2
  </div>
  <div class="column">
    Column 3
  </div>
</div>

Responsiveness

Linear auf kleinen Screens

.wrapper {
  display: flex;
}
.column {
  flex: 1;
}

@media (max-width: 30em) {
  .wrapper {
    display: block;
    /* Alternative: flex-direction: column; */
  }
}

http://jsbin.com/sitire/edit?html,css,output

Responsiveness

Andere Reihenfolge

.wrapper {
  display: flex;
}
.column {
  flex: 1;
}

@media (max-width: 30em) {
  .wrapper {
    flex-direction: column;
  }
  .column:last-child {
    order: -1;
  }
}

http://jsbin.com/sitire/edit?html,css,output

«Input Add-On»

form {
  display: flex;
}

input {
  flex: 1;
}

http://jsbin.com/cefore/edit?html,css,output

<form>
  <input type="text">
  <button type="submit">
    Submit
  </button>
</form>

Technische Details

• CSS Flexible Box Layout Module Level 1
• W3C Last Call Working Draft

Browser-Support

Fallback

bspw. für IE <= 9, mit Modernizr

http://jsbin.com/molaxi/edit?html,css,output

/* Floats */
.no-flexbox.no-flexboxlegacy .wrapper:after {
  clear: both;
  content: "";
  display: table;
}
.no-flexbox.no-flexboxlegacy .column {
  float: left;
  width: 25%;
}

/* Tables */
.no-flexbox.no-flexboxlegacy .wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.no-flexbox.no-flexboxlegacy .column {
  display: table-cell;
  width: 50%; /* arbitrary width */
}

What could possibly go wrong?

Vendor-Prefixes

.wrapper {
  display: flex;
}
.column {
  flex: 1;
}
.column:last-child {
  order: -1;
}

Theorie

Autoprefixer

to the rescue

Bugs