证明内容无效

Question

我开始自己学习 html5 和 css3，但在使用 justify-content 居中元素时遇到问题。我的目标是制作一个基本的响应式布局。

在我的代码中，我将整个网络居中，但无法让页眉中的 div 也居中。我正在尝试使用 "justify-content" 将其设置为居中并将 Flex 设置为 1，因为我希望我的 3 个 div 在导航器中使用总数 space 但它不起作用。因此，如果有人可以帮助我，那就太好了。谢谢！

PD: 如果我的英语不是很好，请见谅。

HTML

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <title>HTML5</title>
    <link href="style.css" rel="stylesheet"> 
</head>
<body>
    <header>
        <div id="element1">ELEMENT 1</div>
        <div id="element2">ELEMENT 2</div>
        <div id="element3">ELEMENT 3</div>          
    </header>
    <section>
    </section>
    <footer>
    </footer>
</body>

CSS

* {
    margin:0px;
    padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
    display:block;
}
html{
    width:100%;
    background:white;
    height:100%;    
}
body {
    max-width:2000px;
    display:flex;
    margin:auto;
    background:gray;
}
header{
    display:flex;
    justify-content:center;
}
header div{
    padding:10px;
    flex:1;
}
#element1{
    background:yellow;
}
#element2{
    background:red;
}
#element3{
    background:orange;

Answer 1

你只需要添加这个：

header {
   margin: 0 auto;
}

Answer 2

您可以尝试在 header 部分为 div 添加额外的容器。然后设置显示为inline-block。最后一步是将 "text-align" 属性 of header 设置为居中。代码：https://jsfiddle.net/8w3rz77o/

CSS:

* {
    margin:0px;
    padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
    display:block;
}
html{
    width:100%;
    background:white;
    height:100%;    
}
body {
    max-width:2000px;
    background:gray;
    width: 100%;
}
header{
   width: 100%;
   text-align: center;
}
header > div{
      display: inline-block;
}
header > div > div{
    padding:10px;
    display: inline-block;
}

#element1{
    background:yellow;
}
#element2{
    background:red;
}
#element3{
    background:orange;
    }

证明内容无效

Justify content doesn't work

html

css

flexbox

responsive