Webseiten-Layout mit CSS Flexbox

# Grundgerüst

Box1
Box2

    .container {
        background-color:lightgoldenrodyellow;
        width:600px;
        height:400px;
    }

    .box {
        background-color:lightcoral;
        border:2px blue solid;
    }

    <div class="container">
      <div class="box">Box1 <div>
      <div class="box">Box2 <div>
    <div>

Beispiel anschauen: Grundgerüst

# Display:flex

Box1
Box2

    .container {
        display:flex;
        background-color:lightgoldenrodyellow;
        width:600px;
        height:400px;
    }

    .box {
        background-color:lightcoral;
        border:2px blue solid;
    }

    <div class="container">
      <div class="box">Box1 <div>
      <div class="box">Box2 <div>
    <div>

### Display:flex Boxen wachsen mit Inhalt

Box1
Box2 wächst mit ihrem Inhalt!

    .container {
        display:flex;
        background-color:lightgoldenrodyellow;
        width:600px;
        height:400px;
    }

    .box {
        background-color:lightcoral;
        border:2px blue solid;
    }

    <div class="container">
      <div class="box">Box1 <div>
      <div class="box">Box2 wächst mit ihrem Inhalt <div>
    <div>

Beispiel anschauen: display: flex

# Boxen bekommen die gesamte Größe

Box1
Box2 wächst mit ihrem Inhalt!

    .container {
        display:flex;
        background-color:lightgoldenrodyellow;
        width:600px;
        height:400px;
    }

    .box {
        background-color:lightcoral;
        border:2px blue solid;
        width: 100%;
        height:100%;
        margin-right: 10px;
    }

    <div class="container">
      <div class="box">Box1 <div>
      <div class="box">Box2 wächst mit ihrem Inhalt <div>
    <div>

Alternative:

      flex:1;

Beispiel anschauen: Boxen bekommen die gesamte Größe

# Boxen responsive machen

In den obigen Beispiel werden die Boxen nicht verkleinert, wenn der Browser kleiner wird. Folgende Anweisung macht das jedoch:

Box1
Box2 wächst mit ihrem Inhalt!

    .container {
        display:flex;
        background-color:lightgoldenrodyellow;
        width:100%;
        height:400px; /* Höhe wächst mit Inhalt, height:100% funktioniert nicht so einfach... */
    }

    .box {
        background-color:lightcoral;
        border:2px blue solid;
       width: 100%;
       height:100%;
        margin-right: 10px;
    }

    <div class="container">
      <div class="box">Box1 <div>
      <div class="box">Box2 wächst mit ihrem Inhalt <div>
    <div>

Beispiel anschauen: Boxen responsive machen

# Mehrere Zeilen definieren

Box1
Box2 und das mit mehr Text
Box1
Box2 und das mit mehr Text

    .container {
        display:flex;
        flex-direction: column;
        background-color:lightgoldenrodyellow;
        width:100%;
        height:400px;
    }

    .containerRow {
        display:flex;
        flex:1;
        margin-bottom: 10px;
      }

    .box {
        background-color:lightcoral;
        border:2px blue solid;
       width: 100%;
       height:100%;
        margin-right: 10px;
    }

    <div class="container">
      <div class="containerRow">
        <div class="box">Box1 <div>
        <div class="box">Box2 wächst mit ihrem Inhalt <div>
      <div>
      <div class="containerRow">
        <div class="box">Box1 <div>
        <div class="box">Box2 wächst mit ihrem Inhalt <div>
      <div>
    <div>

Beispiel anschauen: mehrere Zeilen definieren

# height: 100%

Box1
Box2 und das mit mehr Text
Box1
Box2 und das mit mehr Text

       html,
       body {
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          height: 100%;
       }

      .container {
          display:flex;
          flex-direction: column;
          width:100%;
          height:100%;
          background-color:lightgoldenrodyellow;
        }

      .containerRow {
          display:flex;
          flex:1;
          margin-bottom: 10px;
        }

      .box {
          background-color:lightcoral;
          border:2px blue solid;
          flex: 1 1 auto;
          width:100%;
          height:100%;
          margin-right: 10px;
      }

    <div class="container">
      <div class="containerRow">
        <div class="box">Box1 <div>
        <div class="box">Box2 wächst mit ihrem Inhalt <div>
      <div>
        <div class="containerRow">
        <div class="box">Box1 <div>
        <div class="box">Box2 wächst mit ihrem Inhalt <div>
      <div>
    <div>

Beispiel anschauen: heigth: 100%