Flexbox 在标题对齐中不起作用答案

【问题标题】：Flexbox does not work in header alignmentFlexbox 在标题对齐中不起作用
【发布时间】：2021-10-20 23:38:28
【问题描述】：

所以我试图让标题的内容对齐为空格，以将一个发送到左侧和一个发送到右侧。

body {
min-height: 960px;
background-color: #222; 
}
header {
min-height: 250px;
display: flex;
justify-content: space-between;
}
#hero {
color: white;
font-size: 155px;
font-family: 'Elsie' cursive;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
#logo {
height: 36px;
width: 67px;

}

.headline::before {
content: "design";
opacity: 0;
animation-name: animate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 0.5s;
position: relative;
display: inline-block;
}

@keyframes animate {
11.1% {content:"design"; opacity: 0; transform: translateY(0);}
22.2% {content: "design"; opacity: 1; transform: translateY(0);}
33.3% {content:"design"; opacity: 0; transform: translateY(20px);}
44.4% {content: "build"; opacity: 0; transform: translateY(0);}
55.5% {content:"build"; opacity: 1; transform: translateY(0);}
66.6% {content: "build"; opacity: 0; transform: translateY(20px);}
77.7% {content: "innovate"; opacity: 0; transform: translateY(0);}
88.8% {content: "innovate"; opacity: 1; transform: translateY(0);}
99.9%{content: "innovate"; opacity: 0; transform: translateY(20px);}
}

<header>
  <img id="logo" src="images/logo-8.png" alt="">
  <nav>
    <a href="#">About</a>
    <a href="#">Work</a>
    <a href="#">Contact</a>
  </nav>
</header>
<section id="hero">
    <div id="lets_wrapper">
        <h1 id="lets">let's</h1>
    </div>
    <div>
        <h1 class="headline"></h1>
    </div>    
    <div id="together_wrapper">
        <p>together</p>
    </div>
</section>

我还尝试为子元素设置高度和宽度，但这似乎不起作用，徽标和文本在左上角一直堆叠在一起。在其下方还有另一个部分标记，它具有显示 flex、wrap、column 和 align-items center 的 flexbox 属性。我究竟做错了什么？稍后编辑：我已经添加了我现在拥有的所有代码，因为我认为可能存在冲突。

【问题讨论】：

欢迎来到 Stack Overflow！请澄清您的具体问题或添加其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： html css

【解决方案1】：

我认为您的代码运行良好。

header {
  min-height: 250px;
  display: flex;
  justify-content: space-between;
}

<header>
  <img id="logo" src="images/logo-8.png" alt="This is Logo">
  <nav>
    <a href="#">About</a>
    <a href="#">Work</a>
    <a href="#">Contact</a>
  </nav>
</header>

【讨论】：

这里有一些尝试和错误，但是如果你将 flex 和 space-between 命令放在 Nav CSS 而不是 Header CSS 上会发生什么？
没有任何变化。那岂不是只能证明导航的内容而不是导航本身和图像？

【解决方案2】：

我在reset.css 文件中发现了问题，因为我在style.css 之后加载了它，并将标题设置为显示：block。菜鸟的错误，对不起:))

【讨论】：