Question

我正在使用flexbox进行一些练习，因为我想知道它是如何工作的，如何在不使用花车，显示内联或阻挡等的情况下工作，但是我遇到了问题我不喜欢我不知道如何解决它。

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

这是我当前的代码，我为元素添加了背景颜色以显示高度差异。我想知道是否有办法让导航容器与其他容器达到相同的高度（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

默认情况下，flexbox能够提供相等高度列的原因是默认情况下align-items property设置为stretch。

在您的代码中，您已使用align-self: center覆盖导航链接的默认设置：

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

为了将弹性项目与其兄弟姐妹恢复到相同的高度，您需要删除该行代码（或使其成为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

Answer 2

从你的帖子我收集你想要使徽标，导航和搜索divs相同的高度。它看起来像你的标题上的边距样式.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;
}

为什么我的导航容器与徽标和搜索容器

2 个答案: