logo

Bootstrap 4 alpha

Mega Menue Sidebar

css3area


CSS3 Flexbox –

Mittels CSS3 Flexboxen in Verbindung mit html5 tags, können komplette Seitenlayouts responsive gestaltet werden.

Im Folgenden sehen sie ein Beispiel wie ein auf dem Desktop-Bildschirm dargestelltes 3-spaltiges Layout mit Footer und Header, für Smartphones in der Weise dargestellt wird das sich über die Flexboxen beim kleinen Smartphonebildschirm, das 3-spaltige Layout auflöst und flexibel nach unten rutscht.

Verkleinern Sie hierzu einfach ihr Browserfenster um die Wirkung zu sehen

 

header
article
footer

 

Der html-code für dieses kleine Beispiel:


<header>header</header>
<div id='main2'>
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>footer</footer>

 

Der CSS3 Code für dieses kleine Beispiel

 


 #main {
   min-height: 400px;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main < article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }
  
  #main < nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }
  
  #main < aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }
 
  header,footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }
 
  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {
  
   #main, #page {
    -webkit-flex-flow: column;
            flex-direction: column;
   }

   #main < article, #main2 > nav, #main < aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main < nav, #main < aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }
  }
Mouse Over Me !

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Tags

HTML5 META Artikel Doctype Header Footer