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

Question

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

我的 header 部分包含三个容器：徽标、导航链接和搜索。徽标容器和搜索容器具有相同的高度 (104px)，但导航容器没有 (41px)。

这是我当前的代码，我在元素中添加了一个 background-color 以显示高度差。我想知道是否有办法使导航容器的高度与其他容器相同（104px）。

body {
  font-family: Arial, sans-serif;
}
/* reset styles */

body,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
}
/* main wrappers */

.page-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.header {
  width: 100%;
  background-color: darkblue;
  padding: 10px 2%;
}
/* header styles */

header {
  display: flex;
}
header .header-logo,
header .header-search-npt {
  width: 20%;
}
header .header-logo {
  background-color: dodgerblue;
  margin: 10px 0;
}
header .navigation-links {
  width: 60%;
  align-self: center;
  background-color: deepskyblue;
}
header .navigation-links ul {
  display: flex;
  justify-content: center;
}
header .navigation-links ul li {
  margin: 0 15px;
  padding: 10px 0;
}
header .navigation-links ul a {
  color: #000;
  font-size: 18px;
  font-weight: bold;
  padding: 30px 0;
  text-transform: uppercase;
}
header .header-search-npt {
  background-color: dodgerblue;
}
header .header-search-npt input {
  font-size: 16px;
}

<div class="page-wrapper">

  <section class="header">

    <header>

      <div class="header-logo">
        <img src="https://placeholdit.imgix.net/~text?txtsize=18&txt=100x100&w=100&h=100" alt="the logo">
      </div>
      <div class="navigation-links">

        <nav>
          <ul>
            <li><a href="#">Item 1</a>
            </li>
            <li><a href="#">Item 2</a>
            </li>
            <li><a href="#">Item 3</a>
            </li>
            <li><a href="#">Item 4</a>
            </li>
            <li><a href="#">Item 5</a>
            </li>
          </ul>
        </nav>

      </div>
      <div class="header-search-npt">
        <input type="search" name="search-btn" placeholder="Search..." />
      </div>

    </header>

  </section>

</div>

我认为应该有一个不指定容器高度的解决方案，因为我会尝试响应布局。

Answer 1

根据您的 post 我了解到您想要使徽标、导航和搜索 div 具有相同的高度。看起来您 header .header-logo CSS 上的边距样式正在抵消它们。尝试移除徽标的边距，它们应该均匀排列。

发件人：

header .header-logo {
  background-color: dodgerblue;
  margin: 10px 0;
}

收件人：

header .header-logo {
  background-color: dodgerblue;
}

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

发件人：

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

收件人：

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

Answer 2

flexbox 能够默认提供等高列的原因是 align-items property 默认设置为 stretch。

在您的代码中，您已经用 align-self: center:

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

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

为了将 flex 项目恢复到与其兄弟项目相同的高度，您需要删除该行代码（或使其成为 align-self: stretch）。

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

DEMO 1

然后，如果您想将导航链接居中，请将 .navigation-links 设为嵌套的弹性容器并将其弹性项目居中：

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

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

DEMO 2

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

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

DEMO 3

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

Why my navigation container not has the same height as logo and search container

html

css

flexbox