如何使用 CSS FlexBox 创建复杂的页面布局

Question

我正在学习（自学）HTML 和 CSS，我想到了创建以下页面布局的想法，有点复杂，仅使用 HTML 和 CSS弹性框：

这是我得到的：

我的 CSS 和 HTML 代码片段文件：

/*
    I gave background-color to the left-menu and right-text 
    to show their position in the flex container.
 */

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

header {
  text-align: center;
  border: 2px solid blue;
}

#h1-title {
  font-family: 'Tangerine', serif;
  font-size: 3em;
  /*  48px    */
}

nav>#div-left {
  background-color: white;
  color: blue;
  justify-content: center;
}

nav>#div-left>a {
  text-decoration: none;
  display: block;
  padding: 0px 15px;
  margin: 10px auto;
}

nav>#div-left>a:hover {
  background-color: yellow;
  color: blue;
}

main {
  background-color: silver;
}

.row-display-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.container-border {
  border: 2px solid gray;
}

#vertical-menu {
  padding: 0px 20px;
  align-content: flex-start;
}

.left-menu {
  height: 300px;
  justify-content: center;
  align-items: flex-start;
}

.column-right,
.column-center {
  height: 300px;
  padding: 0px 10px;
}

#article-right>#div-right,
#article-center>#div-center {
  background-color: white;
  padding: 10px;
  width: 100;
  margin: 0 20px;
}

.width-10-p {
  width: 10%;
}

.width-37-50-p {
  width: 37.5%;
}

.width-100-p {
  width: 100%;
}

.width-50-p {
  width: 50%;
}

.height-50px {
  height: 50px;
}

.height-50-p {
  height: 50%;
}

footer {
  text-align: center;
  font-family: 'Sofia';
  font-size: 22px;
  border: 2px solid blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="author" content="Binyamin (Benny) Regev">
  <meta name="course" content="Web App Dev - July 2019">
  <title>M8E4-Extra</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
  <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <header>
    <h1 id="h1-title">Making A Beautiful Page</h1>
  </header>
  <main class="row-display-flex align-items-center container-border">
    <article class="row-display-flex align-items-center width-10-p left-menu container-border">
      <nav id="vertical-menu">
        <div id="div-left">
          <a href="#">&#9776;</a>
          <a href="#">File</a>
          <a href="#">Edit</a>
          <a href="#">View</a>
          <a href="#">Tools</a>
          <a href="#">Window</a>
          <a href="#">Help</a>
        </div>
      </nav>
    </article>
    <article id="article-center" class="row-display-flex align-items-center column-center width-37-50-p container-border">
      <div id="div-center">
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
      </div>
    </article>
    <article id="article-right" class="row-display-flex align-items-center column-right width-37-50-p container-border">
      <div id="div-right">
        <!-- Row 1 Column-3 (Right), Row 1 (Top) 100% of 37.5% -->
        <div class="row-display-flex align-items-center container-border height-50-p">
          <p class="width-100-p">
            Parent: Row-1_Column-Right, First-Row (top-row)
          </p>
        </div>
        <!-- Row 1 Column-3 (Right), Row 2 (Bottom) 2 columns each 50% of parent width -->
        <div class="row-display-flex align-items-center height-50-p">
          <div class="row1-col3-row2 width-50-p container-border">
            Parent: Row-1_Column-Right, This: 2nd-Row_left-column
          </div>
          <div class="row1-col3-row2 width-50-p container-border">
            Parent: Row-1_Column-Right, This: 2nd-Row_right-column
          </div>
        </div>
      </div>
    </article>
  </main>
  <footer>
    <h3>Footer Text</h3>
  </footer>
</body>

</html>

header 和 footer 不是问题，从 Google© 拿了一些字体。

我创建了一个包含 3 列的 ROW 弹性容器。我用于 nav 元素的左列是一个垂直菜单。中心栏用于显示我必须显示的任何文本。在右列中，我创建了 2 行 flexboxes：顶行的宽度是其父行的 100%，底行分为 2 列，这是我的问题：我希望 2 行延伸到右边的整个区域柱子。

如果能帮助我拉伸主行右栏的弹性项目以匹配页面设计，我将不胜感激。

Answer 1

只需告诉那 2 列增长：

#article-right, #article-center {
  flex-grow: 1;
}

/*
    I gave background-color to the left-menu and right-text 
    to show their position in the flex container.
 */

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

header {
  text-align: center;
  border: 2px solid blue;
}

#h1-title {
  font-family: 'Tangerine', serif;
  font-size: 3em;
  /*  48px    */
}

nav>#div-left {
  background-color: white;
  color: blue;
  justify-content: center;
}

nav>#div-left>a {
  text-decoration: none;
  display: block;
  padding: 0px 15px;
  margin: 10px auto;
}

nav>#div-left>a:hover {
  background-color: yellow;
  color: blue;
}

main {
  background-color: silver;
}

.row-display-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.container-border {
  border: 2px solid gray;
}

#vertical-menu {
  padding: 0px 20px;
  align-content: flex-start;
}

.left-menu {
  height: 300px;
  justify-content: center;
  align-items: flex-start;
}

.column-right,
.column-center {
  height: 300px;
  padding: 0px 10px;
}

#article-right>#div-right,
#article-center>#div-center {
  background-color: white;
  padding: 10px;
  width: 100;
  margin: 0 20px;
}

.width-10-p {
  width: 10%;
}

.width-37-50-p {
  width: 37.5%;
}

.width-100-p {
  width: 100%;
}

.width-50-p {
  width: 50%;
}

.height-50px {
  height: 50px;
}

.height-50-p {
  height: 50%;
}

footer {
  text-align: center;
  font-family: 'Sofia';
  font-size: 22px;
  border: 2px solid blue;
}

#article-right, #article-center {
  flex-grow: 1;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="author" content="Binyamin (Benny) Regev">
  <meta name="course" content="Web App Dev - July 2019">
  <title>M8E4-Extra</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
  <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <header>
    <h1 id="h1-title">Making A Beautiful Page</h1>
  </header>
  <main class="row-display-flex align-items-center container-border">
    <article class="row-display-flex align-items-center width-10-p left-menu container-border">
      <nav id="vertical-menu">
        <div id="div-left">
          <a href="#">&#9776;</a>
          <a href="#">File</a>
          <a href="#">Edit</a>
          <a href="#">View</a>
          <a href="#">Tools</a>
          <a href="#">Window</a>
          <a href="#">Help</a>
        </div>
      </nav>
    </article>
    <article id="article-center" class="row-display-flex align-items-center column-center width-37-50-p container-border">
      <div id="div-center">
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
      </div>
    </article>
    <article id="article-right" class="row-display-flex align-items-center column-right width-37-50-p container-border">
      <div id="div-right">
        <!-- Row 1 Column-3 (Right), Row 1 (Top) 100% of 37.5% -->
        <div class="row-display-flex align-items-center container-border height-50-p">
          <p class="width-100-p">
            Parent: Row-1_Column-Right, First-Row (top-row)
          </p>
        </div>
        <!-- Row 1 Column-3 (Right), Row 2 (Bottom) 2 columns each 50% of parent width -->
        <div class="row-display-flex align-items-center height-50-p">
          <div class="row1-col3-row2 width-50-p container-border">
            Parent: Row-1_Column-Right, This: 2nd-Row_left-column
          </div>
          <div class="row1-col3-row2 width-50-p container-border">
            Parent: Row-1_Column-Right, This: 2nd-Row_right-column
          </div>
        </div>
      </div>
    </article>
  </main>
  <footer>
    <h3>Footer Text</h3>
  </footer>
</body>

</html>

Answer 2

感谢 BugsArePeopleToo 的提示，但这不是解决方案。我的代码没有工作是我的错，因为我在 CSS 中有错误。现在它的工作原理如屏幕截图所示：

这是更正后的代码片段：

/*
    I gave background-color to the left-menu and right-text 
    to show their position in the flex container.
 */

* {
    margin: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

header {
    text-align: center;
    border: 2px solid blue;
}

#h1-title {
    font-family: 'Tangerine', serif;
    font-size: 3em;     /*  48px    */
}

nav>#div-left {
    background-color: white;
    color: blue;
    justify-content: center;
}

nav>#div-left>a {
    text-decoration: none;
    display: block;
    padding: 0px 15px;
    margin: 10px auto;
}

nav>#div-left>a:hover {
    background-color: yellow;
    color: blue;
}

main {
    background-color: silver;
}

.row-display-flex {
    display: flex;
}

.container-border {
    border: 2px solid gray;
}

#vertical-menu {
    padding: 0px 20px;
    align-content: flex-start;
}

.left-menu {
    height: 300px;
    justify-content: center;
    align-items: flex-start;
}

.column-right, .column-center {
    height: 300px;
}

.row1-col3-row {
    align-items: flex-start;
}

#article-center>#div-center, #article-right>#div-right {
    background-color: white;
    width: 100;
}

.width-10-p {
    width: 10%;
}

.width-37-50-p {
    width: 37.5%;
}

.width-100-p {
    width: 100%;
}

.height-50-p {
    height: 50%;
}

footer {
    text-align: center;
    font-family: 'Sofia';font-size: 22px;    
    border: 2px solid blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="Binyamin (Benny) Regev">
    <meta name="course" content="Web App Dev - July 2019">
    <title>M8E4-Extra</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
    <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <header>
        <h1 id="h1-title">Making A Beautiful Page</h1>
    </header>
    <main class="row-display-flex align-items-center container-border">
        <article class="row-display-flex align-items-center width-10-p left-menu container-border">
            <nav id="vertical-menu">
                <div id="div-left">
                    <a href="#">&#9776;</a>
                    <a href="#">File</a>
                    <a href="#">Edit</a>
                    <a href="#">View</a>
                    <a href="#">Tools</a>
                    <a href="#">Window</a>
                    <a href="#">Help</a>
                </div>
            </nav>
        </article>
        <article id="article-center"
            class="row-display-flex align-items-center column-center width-37-50-p container-border">
            <div id="div-center">
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
            </div>
        </article>
        <article id="article-right"
            class="row-display-flex column-right width-37-50-p container-border">
            <div id="div-right">
                <!-- Row 1 Column-3 (Right), Row 1 (Top) 100% of 37.5% -->
                <article class="row-display-flex container-border height-50-p">
                    <p class="width-100-p">
                        Parent: Row-1_Column-Right, First-Row (top-row)
                    </p>
                </article>
                <!-- Row 1 Column-3 (Right), Row 2 (Bottom) 2 columns each 50% of parent width -->
                <article class="row-display-flex row-1-col-3-row height-50-p">
                    <div class="row1-col3-row container-border">
                        Parent: Row-1_Column-Right, 
                        This: 2nd-Row_left-column
                    </div>
                    <div class="row1-col3-row container-border">
                        Parent: Row-1_Column-Right, 
                        This: 2nd-Row_right-column
                    </div>
                </article>
            </div>
        </article>
    </main>
    <footer>
        <h3>Footer Text</h3>
    </footer>
</body>

</html>

如何使用 CSS FlexBox 创建复杂的页面布局

How To Create This Complex Page Layout Using CSS FlexBox

html

css

page-layout

flexbox