Flexbox Example 2
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%