Html 如何使用CSS flexbox将导航条从侧面重新定位到中心，并使用放大字体？
当页面宽度变为低于某个阈值时，我应该只使用flexbox来移动东西。之前和之后的页面布局应该如下所示：我不知道这是如何完成的，这个作业是在学习网格和媒体查询之前完成的，所以我想我真的不应该使用这些 我的代码如下（没有任何行与重新定位导航栏有关，因为我不知道用于此目的的属性，所以它基本上只是标题、导航栏、段落和页脚的通用显示）：Html 如何使用CSS flexbox将导航条从侧面重新定位到中心，并使用放大字体？,html,css,Html,Css,当页面宽度变为低于某个阈值时，我应该只使用flexbox来移动东西。之前和之后的页面布局应该如下所示：我不知道这是如何完成的，这个作业是在学习网格和媒体查询之前完成的，所以我想我真的不应该使用这些 我的代码如下（没有任何行与重新定位导航栏有关，因为我不知道用于此目的的属性，所以它基本上只是标题、导航栏、段落和页脚的通用显示）： .内容{ 保证金：0自动； 最小宽度：1000px； } .flex{ 显示器：flex； 位置：相对位置； } a{ 颜色：红色； } 文章{ 左边距：200px；
.内容{
保证金：0自动；
最小宽度：1000px；
}
.flex{
显示器：flex；
位置：相对位置；
}
a{
颜色：红色；
}
文章{
左边距：200px；
}
身体{
字体系列：“开放式Sans”，无衬线；
}
页脚{
颜色：#888888；
字体大小：14px；
左边距：100px；
}
标题{
字体大小：60px；
文本对齐：居中；
}
导航{
显示器：flex；
弯曲方向：立柱；
左边距：100px；
位置：绝对位置；
}
响应布局
我的反应式布局
Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克
这是一种无生命的食物。整数欧盟
直径拍卖商，ultrices lorem id，帕特·尼西。奥古斯都，塞德·普雷蒂姆
nec feugiat元素，在威尼斯纳蒂斯的neque magna ultrices nulla
利古拉的奥古斯·麦格纳。Nunc euismod，turpis sed eleifend Comodo，
tellus Elite lacinia ipsum，欧盟权杖tortor neque id mauris。
在faucibus中，Interdum和malesuada在第一次同侧前就出名了。
莫比·维泰尔·莱奥里特，我是莫莱斯蒂·莱奥里特。暂时性万岁
iaculis aliquet，dolor nulla rhoncus turpis，在Consequeat nisi
埃宁的托托。这是一个巨大的、有效的设施
毛里斯·奥纳雷·内克。
佩伦特式居住者morbi tristique Sentecus et netus et
malesuada是著名的ac turpis egestas。Morbi orci nunc，blandit et
天鹅绒，绿色元素。Donec arcu purus，consequat
我的心，我的心。莫利斯莫比疗效
马蒂斯。酒后驾车。发酵液的浓度。Nunc
发酵剂埃拉特和阿利奎特。整粒pharetra
前庭。大杂烩是一种有效的杂烩。
目前的设施是有效的。无弧舌，
请注意，这是一种特殊的食品，如芸香碱
伤口愈合，伤口愈合。
ultrices sollicitudin arcu id viverra。在nec varius orci。
佩伦特式居住者morbi tristique Sentecus et netus et
malesuada是著名的ac turpis egestas。没有奥古斯都
火绒假币。自由和幸福生活前暂停
波特托尔。塞德·特里斯蒂克·普尔文纳·因特杜姆。前庭前庭
orci是一个consequeat。维韦拉矢状体。前庭
我是托托。不可能的。
&抄袭；我的特别设计小组
如果可能的话，请教我如何单独使用flexbox。多谢 当前CSS存在一些问题：
导航位置：绝对navarticlejustify contentflex wrap<html>
<head>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<style>
.content {
margin: 0 auto;
min-width: 1000px;
}
.flex {
display: flex;
position: relative;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
margin: 0 auto;
}
a {
color: red;
}
article {
min-width: 800px;
}
body {
font-family: "Open Sans", sans-serif;
}
footer {
color: #888888;
font-size: 14px;
margin-left: 100px;
}
header {
font-size: 60px;
text-align: center;
}
nav {
display: flex;
flex-direction: column;
min-width: 100px;
}
</style>
<title>Responsive Layout</title>
</head>
<body>
<main>
<header>My Responsive Layout</header>
<div class="content">
<div class="flex">
<nav>
<a href="">Home</a>
<a href="">About Us</a>
<a href="">Contact Us</a>
</nav>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
vel felis id quam sodales volutpat non vitae tellus. Integer eu
diam auctor, ultrices lorem id, volutpat nisi. Sed pretium, augue
nec elementum feugiat, neque magna ultrices nulla, at venenatis
augue magna at ligula. Nunc euismod, turpis sed eleifend commodo,
tellus elit lacinia ipsum, eu scelerisque tortor neque id mauris.
Interdum et malesuada fames ac ante ipsum primis in faucibus.
Morbi vitae elit id mi molestie laoreet. Vivamus tempor, magna vel
iaculis aliquet, dolor nulla rhoncus turpis, in consequat nisi
tortor at enim. Sed faucibus magna erat, efficitur facilisis
mauris ornare nec.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Morbi orci nunc, blandit et
velit non, luctus elementum sapien. Donec arcu purus, consequat
quis diam quis, pretium tempus urna. Morbi efficitur mollis
mattis. Duis eu sodales lorem. Etiam vel fermentum lacus. Nunc
fermentum erat et aliquet dapibus. Integer pharetra imperdiet
vestibulum. Pellentesque varius magna a lorem tristique efficitur.
Praesent facilisis congue nibh sed efficitur. Nullam arcu ligula,
eleifend ut lectus sit amet, sodales rutrum ex. Proin ultricies
vulputate velit vitae porttitor.
</p>
<p>
Ut ultrices sollicitudin arcu id viverra. In nec varius orci.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Nullam euismod urna non augue
tincidunt aliquet. Suspendisse pretium dui vitae libero euismod
porttitor. Sed tristique pulvinar interdum. Praesent vestibulum ac
orci a consequat. Etiam bibendum sagittis viverra. Vestibulum quis
mi tortor. Nulla bibendum nunc et metus faucibus aliquet.
</p>
</article>
</div>
<footer>© My Special Layout Crew</footer>
</div>
</main>
</body>
</html>
.内容{
保证金：0自动；
最小宽度：1000px；
}
.flex{
显示器：flex；
位置：相对位置；
证明内容：中心；
柔性包装：包装；
最大宽度：800px；
保证金：0自动；
}
a{
颜色：红色；
}
文章{
最小宽度：800px；
}
身体{
字体系列：“开放式Sans”，无衬线；
}
页脚{
颜色：#888888；
字体大小：14px；
左边距：100px；
}
标题{
字体大小：60px；
文本对齐：居中；
}
导航{
显示器：flex；
弯曲方向：立柱；
最小宽度：100px；
}
响应布局
我的反应式布局
Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克
这是一种无生命的食物。整数欧盟
直径拍卖商，ultrices lorem id，帕特·尼西。奥古斯都，塞德·普雷蒂姆
nec feugiat元素，在威尼斯纳蒂斯的neque magna ultrices nulla
利古拉的奥古斯·麦格纳。Nunc euismod，turpis sed eleifend Comodo，
tellus Elite lacinia ipsum，欧盟权杖tortor neque id mauris。
在faucibus中，Interdum和malesuada在第一次同侧前就出名了。
莫比·维泰尔·莱奥里特，我是莫莱斯蒂·莱奥里特。暂时性万岁
iaculis aliquet，dolor nulla rhoncus turpis，在Consequeat nisi
埃宁的托托。这是一个巨大的、有效的设施
毛里斯·奥纳雷·内克。
<html>
<head>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<style>
.content {
margin: 0 auto;
min-width: 1000px;
}
.flex {
display: flex;
position: relative;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
margin: 0 auto;
}
a {
color: red;
}
article {
min-width: 800px;
}
body {
font-family: "Open Sans", sans-serif;
}
footer {
color: #888888;
font-size: 14px;
margin-left: 100px;
}
header {
font-size: 60px;
text-align: center;
}
nav {
display: flex;
flex-direction: column;
min-width: 100px;
}
</style>
<title>Responsive Layout</title>
</head>
<body>
<main>
<header>My Responsive Layout</header>
<div class="content">
<div class="flex">
<nav>
<a href="">Home</a>
<a href="">About Us</a>
<a href="">Contact Us</a>
</nav>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
vel felis id quam sodales volutpat non vitae tellus. Integer eu
diam auctor, ultrices lorem id, volutpat nisi. Sed pretium, augue
nec elementum feugiat, neque magna ultrices nulla, at venenatis
augue magna at ligula. Nunc euismod, turpis sed eleifend commodo,
tellus elit lacinia ipsum, eu scelerisque tortor neque id mauris.
Interdum et malesuada fames ac ante ipsum primis in faucibus.
Morbi vitae elit id mi molestie laoreet. Vivamus tempor, magna vel
iaculis aliquet, dolor nulla rhoncus turpis, in consequat nisi
tortor at enim. Sed faucibus magna erat, efficitur facilisis
mauris ornare nec.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Morbi orci nunc, blandit et
velit non, luctus elementum sapien. Donec arcu purus, consequat
quis diam quis, pretium tempus urna. Morbi efficitur mollis
mattis. Duis eu sodales lorem. Etiam vel fermentum lacus. Nunc
fermentum erat et aliquet dapibus. Integer pharetra imperdiet
vestibulum. Pellentesque varius magna a lorem tristique efficitur.
Praesent facilisis congue nibh sed efficitur. Nullam arcu ligula,
eleifend ut lectus sit amet, sodales rutrum ex. Proin ultricies
vulputate velit vitae porttitor.
</p>
<p>
Ut ultrices sollicitudin arcu id viverra. In nec varius orci.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Nullam euismod urna non augue
tincidunt aliquet. Suspendisse pretium dui vitae libero euismod
porttitor. Sed tristique pulvinar interdum. Praesent vestibulum ac
orci a consequat. Etiam bibendum sagittis viverra. Vestibulum quis
mi tortor. Nulla bibendum nunc et metus faucibus aliquet.
</p>
</article>
</div>
<footer>© My Special Layout Crew</footer>
</div>
</main>
</body>
</html>