Flexbox Holy Grail(用flex沙盒练习了web design设计传统难题Holy Grail)

flexbox-holy-grail-starter.markdown

Flexbox Holy Grail Starter

Example from: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

A Pen by liuxiaomingskm on CodePen.

License.

index.html

<header>
  <a href="">Nav Left</a>
  <a href="">Nav Right</a>
</header>
<main>
  <article>MAIN CONTENT</article>
  <nav>SIDE NAV</nav>
  <aside>ASIDE</aside>
</main>
<footer>FOOTER</footer>

style.css

body {
  display:flex;
  margin: 0;
  flex-direction:column;
  min-height: 100vh;
  background:#2c3e50;
  font-family:Helvetica;
  
}
a {
  color: black;
  text-decoration:none;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}
header, footer {
  background: #66CDAA;
  flex-basis: 100px;
}

main > * , header, footer {
  margin:4px;
  padding:5px;
  border-radius:7px;
}

main {
  display:flex;
  flex-basis: 800px;
  text-align: center;

}
article {
  flex: 4 0 60%;
  background: #ecf0f1;
 
}
nav {
  flex: 1 1 20%;
  background: #95a5a6;
  order: -1;
  text-align: center;

}
aside {
  flex: 1 0 20%;
  background: #3498db;
    text-align: center;
}

@media all  and (max-width: 640px){
  main {
    flex-direction: column;
    flex grow: 1;
  }
  nav {
    order: 0;
  }
}