Html 为什么我的导航容器与徽标和搜索容器的高度不同

我正在用flexbox进行一些练习，因为我想知道它是如何工作的，以及如何在不使用浮点、显示内联或块等的情况下工作，但我遇到了一个问题，我不知道如何解决它

我有三个容器的标题部分：徽标、导航链接和搜索。徽标和搜索的容器具有相同的高度（104px），但导航容器编号（41px）

这是我当前的代码，我为元素添加了背景色以显示高度差。我想知道是否有办法使导航集装箱达到与其他集装箱相同的高度（104px）

正文{
字体系列：Arial，无衬线；
}
/*重置样式*/
身体，
保险商实验室{
保证金：0；
填充：0；
列表样式：无；
}
a{
文字装饰：无；
}
/*主包装*/
.页面包装器{
显示器：flex；
柔性包装：包装；
宽度：100%；
}
.标题{
宽度：100%；
背景色：深蓝色；
填充：10px2%；
}
/*标题样式*/
标题{
显示器：flex；
}
标题。标题标志，
标题。标题搜索{
宽度：20%；
}
标题。标题标志{
背景色：淡蓝色；
利润率：10px0；
}
标题.导航链接{
宽度：60%；
自对准：居中；
背景颜色：深蓝；
}
标题.导航链接{
显示器：flex；
证明内容：中心；
}
标题.导航链接ul li{
利润率：0.15px；
填充：10px0；
}
标题.导航链接{
颜色：#000；
字号：18px；
字体大小：粗体；
填充：30px0；
文本转换：大写；
}
标题。标题搜索{
背景色：淡蓝色；
}
header.header搜索输入{
字体大小：16px；
}

从您的帖子中，我推测您希望使徽标、导航和搜索分区的高度相同。它看起来像你页眉上的边距样式。页眉徽标CSS正在抵消它们。试着从你的标志上去掉边距，它们应该均匀排列

发件人：

致：

然后为导航链接样式添加高度

发件人：

致：

---

flexbox在默认情况下能够提供等高列的原因是默认情况下设置为

拉伸

在代码中，您已使用

align self:center

覆盖导航链接的默认设置：

header .navigation-links {
    width: 60%;
    align-self: center;
    background-color: deepskyblue;
}

为了将flex项恢复为与其同级项相同的高度，您需要删除该行代码（或使其

align self:stretch

）

然后，要恢复第一列（徽标）的高度相等，请删除顶部和底部边距：

header .header-logo {
    background-color: dodgerblue;
    /* margin: 10px 0; <-- REMOVE */
    }

标题。标题徽标{
背景色：淡蓝色；
/*边距：10px 0；感谢您的解释和演示，现在我对flexbox的工作原理有了更多的了解。
header .navigation-links {
  width: 60%;
  align-self: center;
  background-color: deepskyblue;
}

header .navigation-links {
  width: 60%;
  height:104px;
  align-self: center;
  background-color: deepskyblue;
}

header .navigation-links {
    width: 60%;
    align-self: center;
    background-color: deepskyblue;
}

header .navigation-links {
    width: 60%;
    /* align-self: center; <-- REMOVE */
    background-color: deepskyblue;
}

header .navigation-links {
    width: 60%;
    /* align-self: center; <-- REMOVE */
    background-color: deepskyblue;

    /* NEW */
    display: flex;
    justify-content: center;
    align-items: center;
    }

header .header-logo {
    background-color: dodgerblue;
    /* margin: 10px 0; <-- REMOVE */
    }