我想要"内容"；我的导航栏有一个最大尺寸。让我解释一下，我的导航栏有100%的宽度，但里面的内容没有，我不希望它有100%的大小，我需要导航栏的大小与我的主页中的内容相同(在本例中是一个800px的例子(。
我正在创建我的导航栏与flexbox属性
集装箱：
<div class="item">
// Content A
</div>
<div class="item">
// Content B
</div>
<div class="item">
// Content C
</div>
代表一个ul li a菜单，另一个是一个标志，还有一个是按钮
我怎样才能达到这种效果？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
}
nav {
width: 100%;
max-height: 60px;
background-color: black;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.item {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #ccc;
}
main {
max-width: 800px;
background-color: #fff;
width: 100vw;
height: 100vh;
margin: 0 auto;
}
</style>
</head>
<body>
<nav>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</nav>
<main>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
</main>
</body>
</html>已更新
好的，但是div的内容不是居中的，它是左对齐的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
}
nav {
width: 100%;
max-height: 60px;
background-color: black;
}
.item {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: #ccc;
}
main {
max-width: 800px;
background-color: #fff;
width: 100vw;
height: 100vh;
margin: 0 auto;
}
.container{
max-width: 800px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
</style>
</head>
<body>
<nav>
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</nav>
<main>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
<article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam. ipsa nemo
voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
quibusdam.
</article>
<br>
</main>
</body>
</html>如果你只想要一个100%宽度的div，里面的实际div是800px，只需将nav保持在100%宽度，并将里面的三个div包装在另一个宽度为800px的div中。
<nav>
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</nav>
<style>
.container {
width: 800px;
}
</style>