Holy Grail Layout Using Flexbox

以聖杯版型為例子學習 Flex Box

Holy Grail (聖杯版型) - desktop first

HTML Structure

<div class="holy_grail">
  <header>
    <h3>Header</h3>
    <p>desktop first</p>
  </header>

  <div class="container">
    <main>
      <h3>Main</h3>
    </main>
    <aside>
      <h3>Aside</h3>
    </aside>
    <article>
      <h3>Article</h3>
    </article>
  </div>

  <footer>
    <h3>Footer</h3>
  </footer>
</div>

@import "reset.css";

body {
  padding: 0;
  margin: 0;
}

.holy_grail {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: rgb(206, 240, 178);
}

header {
  background-color: rgb(187, 187, 187);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  h3 {
    margin: 0;
  }

  p {
    margin: 0;
  }
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: row;
  height: 100%;
  main {
    background-color: rgb(255, 215, 215);
    // flex-basis: 700px; // 軸長
    flex-grow: 4;
  }

  aside {
    flex-grow: 1;
    order: -1;
    background-color: rgb(165, 241, 203);
  }

  article {
    flex-grow: 1;
    background-color: rgb(173, 226, 240);
  }
}

footer {
  background-color: rgb(250, 233, 178);
}

加入 media query

// mobile breakpoint
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

https://codepen.io/william_k/pen/rNLxLGo

Holy Grail (聖杯版型) - mobile first

flex 屬性

flex: 0 1 auto;

flex: 默認值包含 flex-grow, flex-shrink, flex-basis

flex-grow: 放大比例，default 為 0 (在剩餘空間不放大)

flex-shrink: 縮小比例，default 為 1 (空間不足會適當縮小)

flex-basis: 控制元素的主軸的長度 (width)

flex: none; // flex : 0,0,auto;

flex: auto; // flex:1,1,auto;

flex: 1; // flex:1,1,0%;

html 沿用上方的 code

<div class="holy_grail">
  <header>
    <h3>Header</h3>
    <p>mobile first</p>
  </header>

  <div class="container">
    <main>
      <h3>Main</h3>
    </main>
    <aside>
      <h3>Aside</h3>
    </aside>
    <article>
      <h3>Article</h3>
    </article>
  </div>

  <footer>
    <h3>Footer</h3>
  </footer>
</div>

@import "reset.css";

body {
  padding: 0;
  margin: 0;
}

.holy_grail {
  background-color: rgb(206, 240, 178);
  height: 100vh;
  display: flex;
  flex-direction: column;
  // flex: auto; flex: 1 1 auto;
}

header {
  background-color: rgb(187, 187, 187);
  display: flex;
  align-items: center;
  flex-direction: column;

  h3 {
    margin: 0;
  }

  p {
    margin: 0;
  }
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; // 在 .container & main 上需要把高度撐開

  main {
    background-color: rgb(255, 215, 215);
    flex: 1 1 auto;
  }

  aside {
    background-color: rgb(165, 241, 203);
    order: -1; // order first
  }

  article {
    background-color: rgb(173, 226, 240);
  }
}

footer {
  background-color: rgb(250, 233, 178);
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .container {
    display: flex;
    flex-direction: row;
    main {
      flex-grow: 4;
    }
    aside {
      flex-grow: 1;
    }
    article {
      flex-grow: 1;
    }
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}

https://codepen.io/william_k/pen/bGeEeaY

Reference:
MDN: Flexbox

MDN: flex 屬性

flex:1 和 flex:auto 区别