HTML Flex Layout, das zu 100% skaliert

Submitted 17 days ago | Updated 15 days ago

Ein zweispaltiges HTML Layout, das auf CSS v3 und Flex basiert. Es hat zwei Spalten und skaliert in jeder Situation (egal, wie viel Daten anzuzeigen sind) horizontal und vertikal zu 100%. Auf dieser Basis werde ich das Blog ausbauen, denn es ist auch mobil-fähig (ja, nur für eine Breite von 768px, aber das kann man nun wirklich leicht erweitern!). 👍 Das wäre übrigens eine schöne Gelegenheit, das auf SASS aufzusetzen, denn ich sehe da schon wieder einiges an Oh mein Gott, ich wiederhole mich... 😎 Ach und PS: ich habe versucht, das von irgendwoher als fertiges Paket zu kopieren. Ich habe nichts gefunden. Auch nach Stunden nicht... 😤
 

© 2019: As free as a 🍺 can be...

<!DOCTYPE html>
<html>
<head>
  <title>Your Title</title>  
  <style> 
         * { 
             padding: 0; 
             margin: 0; 
         }

         .header {
           margin: 0;
           padding: 0;
           background: #001;
           color: #ff0;
           text-align: center;
           height: 2em;
           line-height: 2em;
         }

         .outer-flex {
          display: flex;
          flex-direction: column;
          height: 100vh;
         }

         .inner-flex {
          display: flex;
          flex-direction: row;
          flex: 1;
         }

         .left {
           min-width: 250px;
           max-width: 200px;
           background:tomato;
           color: whitesmoke;
           padding: 20px;
           flex: 1;
         }

         .right {
           background: chocolate;
           color: whitesmoke;
           padding: 20px;
           flex: 1;
         }
         
         @media screen and (max-width:768px) {
          .inner-flex { flex-direction: column; }
          .left { background: tomato; max-width: 100%; min-height: 4em; max-height: 4em; line-height: 4em; color: #000;};
        }

    </style>  
</head>
<body>

  <div class="outer-flex">
      <div class="header">TOP</div>
      <div class="inner-flex">
        <div class="left">
          <p style="font-size: 34px; color: #333; margin-bottom: 10px;">Menu</p>
          <ul style="list-style-type: none; font-size: 24px; color: #333">
            <li>Entry 1</li>
            <li>Entry 2</li>
            <li>Entry 3</li>
            <li>Entry 4</li>
          </ul>
        </div>
        <div class="right">
          Content
        </div>
      </div>
  </div>

</body>
</html>

Wie das im Moment ausschaut, kann man an dieser Internetseite sehen 😏 Im Moment verschwindet das Menü bzw. die Menüeinträge noch im Nichts, wenn die Breite klein wird. Nicht wirklich ein großes Problem, oder?