如何修复 CSS Flexbox 中的边距答案

【问题标题】：How to fix the margin in CSS Flexbox如何修复 CSS Flexbox 中的边距
【发布时间】：2021-11-07 11:22:10
【问题描述】：

我有一个灵活激活的容器标题。

其中还有两个子容器 - #nav-bar（包含导航链接）和 #header-img（包含徽标）。当我想将导航链接放在他们的盒子底部时，问题就出现了，我无法做到这一点，因为盒子的大小是由徽标决定的。

基本上 - “主页”“功能”“联系我们”应该触及下边框。我已经尝试了所有 flex 属性，但无法弄清楚。

有人可以帮忙吗？

#header{
  border: 1px solid blue;
  display:flex;
  justify-content: space-between;
}
#nav-bar{
  border: 1px solid blue;
  display:flex;
  align-content:flex-end;
}
.nav-link{
  padding-left:25px;
}

<header id="header">
  <img id="header-img" src="https://i.postimg.cc/g2bJbHNX/email-logo-AUM.png" width=25% height=25%>
  <nav id="nav-bar">
    <p class="nav-link"><a href="/home.come">Home</p>
    <p class="nav-link"><a href="#summary-video">Features</p>
    <p class="nav-link"><a href="/contactus.com">Contact us</a></p>
  </nav>
</header>

【问题讨论】：

我不明白你想要的结果如何，你可以添加插图吗？
您好 Omri 我想要房屋、功能和联系我们以触摸他们的边框底部。 @baro 已经给出了答案。我无法附上图片向您展示我想要的效果，但是如果您查看他的解决方案，您就会明白。

标签： css flexbox

【解决方案1】：

这是您想要达到的结果吗？如果是这样，你需要的属性是align-self（除了删除默认段落p底部边距）。

#header{
  border: 1px solid blue;
  display:flex;
  justify-content: space-between;
}
#nav-bar{
  border: 1px solid blue;
  display:flex;
  align-content:flex-end;
}
.nav-link {
  padding-left:25px;
  
  margin-bottom:0px;
  align-self: flex-end;
  
}

<header id="header">
  <img id="header-img" src="https://i.postimg.cc/g2bJbHNX/email-logo-AUM.png" width=25% height=25%>
  <nav id="nav-bar">
    <p class="nav-link"><a href="/home.come">Home</p>
    <p class="nav-link"><a href="#summary-video">Features</p>
    <p class="nav-link"><a href="/contactus.com">Contact us</a></p>
  </nav>
</header>

【讨论】：

哦，是的！这行得通！没听说过这个标签，现在去查一下。谢谢朋友！

【解决方案2】：

你试过align-items:flex-end;:

#header{
  border: 1px solid blue;
  display:flex;
  justify-content: space-between;
}
#nav-bar{
  border: 1px solid blue;
  display:flex;
  align-items:flex-end;
}
.nav-link{
  padding-left:25px;
  margin: 0;
}

<header id="header">
  <img id="header-img" src="https://i.postimg.cc/g2bJbHNX/email-logo-AUM.png" width=35% height=35%>
  <nav id="nav-bar">
    <p class="nav-link"><a href="/home.come">Home</p>
    <p class="nav-link"><a href="#summary-video">Features</p>
    <p class="nav-link"><a href="/contactus.com">Contact us</a></p>
  </nav>
</header>

【讨论】：

我确实试过这个。它没有用。正确答案已由@baro 回答 - 我已标记，您可以查看！ :D
当然，伙计，很好 :) 但你试过我的 sn-p 吗？和别人有什么区别？
Align-items flex end 只在它自己的盒子里移动文本，而不是整个孩子。基本上， align-item 可用于控制沿 flex 线的整个子项，但是 align-self 控制子项中的内容并根据该内容调整子项。
你应该阅读这个align-items和align-self，干杯伙伴:)