为什么 flexbox 没有按预期对齐项目

Question

我正在创建网页的顶部，其中包含带有叠加层的整页图像。在叠加层的顶部，我在左上角放置了一个徽标，我想将其下方的导航菜单垂直放置在页面底部。

我有一个名为 display: flex 的部分。这有 2 个子元素：徽标和导航栏。根据我的发现，如果 header 被定义为 flex，那么直接子级可以覆盖“align-items”属性，但在我的情况下它不起作用。

如果您查看我的 html/css，您会看到我有一个以黄色突出显示的徽标部分，我想将该徽标（这将是一个图像）移动到底部，所以我应该能够在徽标内设置div --> align-self: felx-end 因为它是定义为 flex 的父容器的直接子容器。但是，它不起作用。

最后有一个垂直菜单栏，为了可见性，我现在给它一个粉红色的背景。我想将我的这个“导航栏”部分移动到页面的大致底部。我不希望它位于下一行的徽标下方。这部分也是定义为 flex 的父元素的子元素。

在某些网站上，我看到子元素被定义为 display: flex，但这不会破坏目的，因为子元素可以通过调用 align-self 覆盖父元素吗？感谢您的所有帮助。

对于这个初学者的任何其他建议，如果我在下面的代码中做错了什么，请随时告诉我。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main-container {
  background-image: url("/assets/images/3017085.jpg");
  height: 100vh;
  background-size: cover;
  text-align: center;
  position: relative;
}

.main-container::after {
  content: "";
  display:  block;
  width: 100%;
  height: 100vh;

  background: #cd5b1d; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #cd5b1d 0%, #051928 0%, #091c2b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #cd5b1d 0%,#051928 0%,#091c2b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #cd5b1d 0%,#051928 0%,#091c2b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd5b1d', endColorstr='#091c2b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index:  0;
}

.main-container > * {
  z-index:  10;
  position: relative;
  color: #FFF;
}


.header{
  display: flex;
  flex:  1 auto;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
  width: 100%;
  height: 5em;
}

.logo {  /*  FIRST IMMEDIATE CHILD ELEMENT OF HEADER (FLEX) */
  background-color: yellow;
  width: 30%;
  height: 100%;
  align-content: flex-end;
}

.logo img {
  width: 250px; 
}

.navbar {  /*  SECOND IMMEDIATE CHILD ELEMENT OF HEADER (FLEX) */
  list-style-type: none;
  background-color: pink;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  z-index: 5;
}

.nav-links li {
  list-style-type: none;
  margin: 0 0 0 9em;
  font-size: 1.4em;
}

<div class="main-container">  <!-- main-container --> 
  <header class="header">  <!-- header -->
    <div class="logo">  <!-- logo -->
      <a href="index.html">
        <p>LOGO HERE</p>
      </a>
    </div>  <!-- /logo -->

    <div class = "navbar">  <!-- navbar --> 
      <ul class="nav-links">
        <li class="nav-item">Menu Item 1</li>
        <li class="nav-item">Menu Item 2</li>
        <li class="nav-item">Menu Item 3</li>
        <li class="nav-item">Menu Item 4</li>
        <li class="nav-item">Menu Item 5</li>
      </ul>
    </div>  <!-- /navbar --> 

  </header>  <!-- /header -->

</div>  <!-- /main-container -->

Answer 1

对于您的徽标，我解决了您的问题，但我不明白您对菜单项的确切要求，您能解释得更好吗？ （我为你的粉色部分做了新的编辑，但我不知道这是否是你想要的）

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main-container {
  background-image: url("/assets/images/3017085.jpg");
  height: 100vh;
  background-size: cover;
  position: relative;
}

.main-container::after {
  content: "";
  display:  block;
  width: 100%;
  height: 100vh;

  background: #cd5b1d; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #cd5b1d 0%, #051928 0%, #091c2b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #cd5b1d 0%,#051928 0%,#091c2b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #cd5b1d 0%,#051928 0%,#091c2b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd5b1d', endColorstr='#091c2b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index:  0;
}

.main-container > * {
  z-index:  10;
  position: relative;
  color: #FFF;
}


.header{
  display: flex;
  justify-content: flex-start;
  align-items: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.logo {  /*  FIRST IMMEDIATE CHILD ELEMENT OF HEADER (FLEX) */
  background-color: yellow;
  width: 30%;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.logo img {
  width: 250px; 
}

.navbar {  /*  SECOND IMMEDIATE CHILD ELEMENT OF HEADER (FLEX) */
  list-style-type: none;
  background-color: pink;
  width: 100%;
  height: 200px;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  z-index: 5;
position: absolute;
 bottom:0;
}

.nav-links li {
  list-style-type: none;
  margin: 0 0 0 9em;
  font-size: 1.4em;
}

<div class="main-container">  <!-- main-container --> 
  <header class="header">  <!-- header -->
    <div class="logo">  <!-- logo -->
      <a href="index.html">
        <p>LOGO HERE</p>
      </a>
    </div>  <!-- /logo -->

    <div class = "navbar">  <!-- navbar --> 
      <ul class="nav-links">
        <li class="nav-item">Menu Item 1</li>
        <li class="nav-item">Menu Item 2</li>
        <li class="nav-item">Menu Item 3</li>
        <li class="nav-item">Menu Item 4</li>
        <li class="nav-item">Menu Item 5</li>
      </ul>
    </div>  <!-- /navbar --> 

  </header>  <!-- /header -->

</div>  <!-- /main-container -->