Html Can'；t使用align item:flex end将nav中的无序列表与底部对齐

我不熟悉

CSS

，我想使用

flex

和

align items:flex end

将导航栏与品红边框底部对齐，但我似乎无法解决这个问题

.container{
宽度：90%；
最大宽度：900px；
保证金：0自动；
显示器：flex；
边框：1px纯品红色；
证明内容：之间的空间；
}
导航{
填充：0；
保证金：0；
显示器：flex；
对齐项目：柔性端；
自对准：居中；
}
导航ul{
列表样式：无；
显示器：flex；
填充：0；
}

社会生活
探索生活中极简主义的博客

您还可以共享html代码吗。但只要看看您的css代码，这可能是一个解决方案：

HTML:

---

只需移除

align self:center从
nav
，它可以解决您的问题：


.container{
宽度：90%；
最大宽度：900px；
保证金：0自动；
显示器：flex；
边框：1px纯品红色；
证明内容：之间的空间；
}
导航{
填充：0；
保证金：0；
显示器：flex；
对齐项目：柔性端；
}
导航ul{
列表样式：无；
显示器：flex；
填充：0；
}

社会生活
探索生活中极简主义的博客






分享你的代码{
html
，
css
}我希望能解决你的问题。嗨@Pedram我已经编辑了这个问题并添加了我的htmlcode@SheharyarAnwar还不够，还需要看
css
code！分享too@Pedram我也添加了css
<ul class="flex-container nav">
  <li class="flex-item">Home</li>
  <li class="flex-item">About Me</li>
  <li class="flex-item">Recent Posts</li>
</ul>

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}
.nav{
  flex-direction: column; 
  float: left;
}
.flex-item {
  padding: 5px;
  width: 50px;
  height: 30px;
  margin: 5px;

  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}