如何设置 color flex (html tags) 位置（覆盖所有网页宽度，在网页末尾作为页脚，相对于 windows 尺寸变化）

Question

1- 开始学习 html（跟随免费在线 html 视频课程，课程中没有 css）。

2- 使用简单的文本编辑（g 编辑）。

3- 下一张图片显示了我的第一个 html 代码，我使用 flex 标签设置页眉和页脚。

4-第一个问题他们没有覆盖所有网页宽度（第一张图片中的点号 1）？

5秒如何将第二个flex的位置设置到网页末尾（即使它是空的，没有正文）？

6- 调整 windows 大小时的最后一个问题，页脚内容向左对齐。如何对齐中心（第二张图片显示问题）？

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

  <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="icon" type="image/png" href="imgs/iconlogo.png" alt="tab icon"/>

    
    <style>

      .flex-header {
        display: flex;
        height: 65px;
        justify-content: space-around;
        background-image: linear-gradient(to right, #00ffc3, #bc4a4a);
      }

      .flex-header > div {
        font-size: 14px;
        margin: auto;
      }

      .white {
        color: #ffffff;
      }
    </style>

    <style>
      .flex-footer {
        display: flex;
        height: 55px;
        align-items: center;
        background-color: #367b97;
        justify-content: center;
      }

      .flex-footer > div {
        font-size: 14px;
      }

      .white {
        color: #ffffff;
      }

    </style>
  </head>

  <body>

    <header>
      <div class="flex-header">
        <div><img src="imgs/logo.svg" alt="logo" width="238" height="50"></div>
        <div><span class="white">English</span></div>
      </div>
    </header>

    <main>
      <p>test</p>
    </main>

    <footer>
      <div class="flex-footer">
        <div><span class="white">Copyright © 2021  Mnkjj test test test test test test test.All rights reserved</span></div>
      </div>
    </footer> 
  </body>
</html>

Answer 1

希望这能奏效。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="icon" type="image/png" href="imgs/iconlogo.png" alt="tab icon" />


    <style>
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .flex-header {
            display: flex;
            height: 65px;
            justify-content: space-around;
            background-image: linear-gradient(to right, #00ffc3, #bc4a4a);
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }

        .flex-header>div {
            font-size: 14px;
            margin: auto;
        }

        .white {
            color: #ffffff;
        }

        footer {
            margin-top: auto;
        }

        .flex-footer {
            display: flex;
            height: 55px;
            align-items: center;
            background-color: #367b97;
            justify-content: center;
        }

        .flex-footer>div {
            font-size: 14px;
        }

        .white {
            color: #ffffff;
        }
    </style>
</head>

<body>

    <header>
        <div class="flex-header">
            <img src="imgs/logo" alt="logo">
            <span class="white">English</span>
        </div>
    </header>

    <main>
        <p>test</p>
    </main>

    <footer>
        <div class="flex-footer">
            <div><span class="white">Copyright © 2021 Mnkjj test test test test test test test.All rights
                    reserved</span></div>
        </div>
    </footer>
</body>

</html>
}````

Answer 2

解决第一个问题（页眉和页脚 flex 容器颜色没有覆盖所有网页宽度），使用 Margin Individual Sides： margin-top, margin-right, margin-bottom, margin-left

来源link: https://www.w3schools.com/css/css_margin.asp

最终代码如下所示：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="icon" type="image/png" href="imgs/iconlogo.png" alt="tab icon" />


    <style>
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .flex-header {
            display: flex;
            height: 65px;
            margin-left: -15px;
            margin-right: -15px;
            margin-top: -15px;
            justify-content: space-around;
            background-image: linear-gradient(to right, #00ffc3, #bc4a4a);
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }

        .flex-header>div {
            font-size: 14px;
            margin: auto;
        }

        .white {
            color: #ffffff;
        }

        footer {
            margin-top: auto;
        }

        .flex-footer {
            display: flex;
            height: 55px;
            margin-left: -15px;
            margin-right: -15px;
            margin-bottom: -15px;
            align-items: center;
            background-color: #367b97;
            justify-content: center;
        }

        .flex-footer>div {
            font-size: 14px;
        }

        .white {
            color: #ffffff;
            padding: 0 10px;
        }
    </style>
</head>

<body>

    <header>
        <div class="flex-header">
            <img src="imgs/logo.svg" alt="logo">
            <span class="white">English</span>
        </div>
    </header>

    <main>
        <p>test</p>
    </main>

    <footer>
         <footer> <div class="flex-footer"> <span class="white">Copyright © 2021 Mnkjj test test test test test test test.All rights reserved</span> </div> </footer>
    </footer>
</body>

</html>

如何设置 color flex (html tags) 位置（覆盖所有网页宽度，在网页末尾作为页脚，相对于 windows 尺寸变化）

how set color flex (html tags) position (cover all web page width, at the end of web page as footer, change relative to windows dimensions)

html

machine-learning

flexbox

web-site-project