layout html css

src/layout.txt

@@ -29,3 +29,61 @@ row
         /column      
 /row
 
+<div class="container">
+  <nav class="nav left">left</nav>
+  <section class="main">
+    <div class="col top">header</div>
+    <div class="col middle">
+      <div class="ver_hor_center">
+        main
+      </div>
+    </div>
+    <div class="col bottom">footer</div>
+  </section> 
+</div>
+
+
+.container {
+  display: flex;
+  flex-flow: row;
+  min-height: 50px;
+  
+}
+.left {
+  flex: 0 0;
+  background-color: blue;
+  height: 100vh;
+}
+.main {
+  width: 100%;
+  background-color: red;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100vh;
+ }
+.col {
+  margin: 2px;
+}
+.top {
+    flex: 0 0;
+    height: 20px;
+    background: yellow;
+  }
+.middle {
+    height: 100%;
+    background: pink;
+  }
+.bottom {
+    flex: 0 0;
+    height: 20px;
+    background: cyan;
+  }
+
+.ver_hor_center
+{
+  /* horizontal und vertikal zentrieren */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}