CSS flexbox 问题（对齐行中的元素）答案

【问题标题】：CSS flexbox issues (aligning elements in row)CSS flexbox 问题（对齐行中的元素）
【发布时间】：2022-01-29 23:43:41
【问题描述】：

在以下场景中，我无法将“关于我”和“项目”选项连续对齐。我试图在菜单类中添加一个 flex-direction，但似乎没有帮助。有人知道吗？

CSS 代码：

#back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);}

.main-heading {
font-size: 60px;
font-family: helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
background-color: blanchedalmond;
color:dimgrey;
padding: 20px;
margin: -20px;}

. menu {
font-size: 20px;
font-family: helvetica, sans-serif;
text-transform: uppercase;
background-color: blanchedalmond;
color: dimgrey;
padding: 50px;
margin: 15px;
flex-direction: row;}

HTML 代码：

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="back">
        <div>
          <h1 class="main-heading">andreas media</h1>
        </div>
        <div class="menu">
          <nav>
              <h2>about me</h2>
              <h2>projects</h2>
        </nav>
         </div>
     </div>
</body>

【问题讨论】：

标签： css flexbox

【解决方案1】：

您需要在nav 上添加display : flex;，如下所示：

#back {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
}

.main-heading {
  font-size: 60px;
  font-family: helvetica, sans-serif;
  text-transform: uppercase;
  text-align: center;
  background-color: blanchedalmond;
  color: dimgrey;
  padding: 20px;
  margin: -20px;
}

.menu {
  font-size: 20px;
  font-family: helvetica, sans-serif;
  text-transform: uppercase;
  background-color: blanchedalmond;
  color: dimgrey;
  padding: 50px;
  margin: 15px;
  flex-direction: row;
}

/* lines I added */
nav{
  display:flex;
  align-items:center;
  gap:2rem; 
}

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="back">
    <div>
      <h1 class="main-heading">andreas media</h1>
    </div>
    <div class="menu">
      <nav>
        <h2>about me</h2>
        <h2>projects</h2>
      </nav>
    </div>
  </div>
</body>

【讨论】：

【解决方案2】：

您需要将 display: flex 分配给父 div，在您的情况下为 'nav'

nav{
  display: flex;
}

这将使它们并排排列...如果您还需要它们水平和垂直对齐，您可以使用 justify-content 和 align-items ：

nav{
  display: flex;
  justify-content: center;
  align-items: center;
}

你可以找到一个很好的 flexbox 指南here。

【讨论】：