VDone Demo VDone Demo
Home
  • Articles

    • JavaScript
  • Study Notes

    • JavaScript Tutorial
    • Professional JavaScript
    • ES6 Tutorial
    • Vue
    • React
    • TypeScript: Build Axios from Scratch
    • Git
    • TypeScript
    • JS Design Patterns
  • HTML
  • CSS
  • Technical Docs
  • GitHub Tips
  • Node.js
  • Blog Setup
  • Learning
  • Interviews
  • Miscellaneous
  • Practical Tips
  • Friends
About
Bookmarks
  • Categories
  • Tags
  • Archives
GitHub (opens new window)

Nikolay Tuzov

Backend Developer
Home
  • Articles

    • JavaScript
  • Study Notes

    • JavaScript Tutorial
    • Professional JavaScript
    • ES6 Tutorial
    • Vue
    • React
    • TypeScript: Build Axios from Scratch
    • Git
    • TypeScript
    • JS Design Patterns
  • HTML
  • CSS
  • Technical Docs
  • GitHub Tips
  • Node.js
  • Blog Setup
  • Learning
  • Interviews
  • Miscellaneous
  • Practical Tips
  • Friends
About
Bookmarks
  • Categories
  • Tags
  • Archives
GitHub (opens new window)
  • HTML

  • CSS

    • CSS Tutorials and Tips Collection
    • Flex Layout Syntax
    • Flex Layout Example - Basics
    • Flex Layout Example - Dice
    • Flex Layout Example - Holy Grail Layout
    • Flex Layout Example - Grid Layout
    • Flex Layout Example - Input Layout
    • CSS3 Transition
    • CSS3 Animation
    • Layout Tip - Auto-Expand Element Height Before Images Load
    • Text Overflow Ellipsis for Single and Multiple Lines
    • Understanding the Box Model Through the box-sizing Property
    • Horizontal and Vertical Centering Methods - Examples
    • How to Automatically Respond to CSS Dark Mode Based on System Theme
    • CSS Trick - Custom Hover Tooltips with :hover and attr()
    • CSS Functions Summary
    • Adding a Scrollbar to a Table's tbody with CSS
    • Animations in Grid Layout
  • 页面
  • CSS
xugaoyi
2019-12-25

Flex Layout Example - Holy Grail Layout

# Flex Layout Example - Holy Grail Layout

You can use F12 developer tools to inspect elements and styles, or open CodePen to edit the code online.

<html>
  <div class="HolyGrail">
    <header>#header</header>
    <div class="wrap">
      <nav class="left">left fixed width 200px</nav>
      <main class="content">center adaptive width</main>
      <aside class="right">right fixed width 200px</aside>
    </div>
    <footer>#footer</footer>
  </div>
</html>
<style>
  .HolyGrail {
    text-align: center;
    display: flex;
    min-height: 40vh;
    flex-direction: column;
  }
  .HolyGrail .wrap {
    display: flex;
    flex: 1;
  }
  .HolyGrail .content {
    background: #eee;
    flex: 1;
  }
  .HolyGrail .left,.HolyGrail .right {
    background:lightgreen;
    flex: 0 0 200px;
  }
  .HolyGrail header,.HolyGrail footer{
    background:#999;
    height: 50px;
    line-height: 50px;
  }
  .HolyGrail .left {
    background:salmon;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

Reference: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html (opens new window)

Edit (opens new window)
Last Updated: 2026/03/21, 12:14:36
Flex Layout Example - Dice
Flex Layout Example - Grid Layout

← Flex Layout Example - Dice Flex Layout Example - Grid Layout→

Recent Updates
01
How I Discovered Disposable Email — A True Story
06-12
02
Animations in Grid Layout
09-15
03
Renaming a Git Branch
08-11
More Articles >
Theme by VDone | Copyright © 2026-2026 Nikolay Tuzov | MIT License | Telegram
  • Auto
  • Light Mode
  • Dark Mode
  • Reading Mode