Question

我不太确定该如何表达这个问题，但是使用flexbox时，即使在间距上也存在一些问题。我正在WordPress中构建标题，我希望所有菜单元素之间的间距均匀。问题是我还有其他两个元素不在WordPress自动生成的菜单中。我还需要它们与菜单的嵌套列表元素等距均匀分布。

我感到这里缺乏我的知识，我需要一些如何实现这一目标的指导。从根本上讲，这是我的代码：

.logo {
  width: 15%;
  float: left;
}

.nav-wrapper {
  display: flex;
  float: right;
  width: 70%;
  flex: 2;
}

.nav-container {
  display: flex;
  flex: 2;
}

.nav-container ul {
  display: flex;
  flex: 2;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

<header>

  <div class="logo">
    Logo
  </div>

  <div class="nav-wrapper">
    <nav class="nav-container">
      <ul>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
      </ul>
    </nav>

    <div class="search">
      <span class="search-text">Search</span>
    </div>

    <div class="mega-menu-button">
      <button>
       Menu
      </button>
    </div>
  </div>
</header>

https://jsfiddle.net/3qo56h8j/1/

现在，这真是一团糟。可能根本不正确。问题是我看不到错误在哪里，可以使用一些帮助。垂直对齐已关闭，但我可以解决。最大的问题是如何将搜索和大型菜单按钮与WordPress生成的菜单项隔开相同的距离？最好以与屏幕成比例的方式。

由于列表是由WordPress生成的，所以我不能仅仅将其他项移到列表中。

Answer 1

您做得很好，只需要计算每个容器的弯曲度即可。

header {
    display: flex;
}

.logo {
    flex: 1;
}

.nav-wrapper {
    display: flex;
    float: right;
    flex: 6;
}

.nav-container {
    display: flex;
    flex: 4;
}

.nav-container ul {
    display: flex;
    flex: 2;
    justify-content: space-between;
    list-style: none;
}

.nav-container li {
    flex: 1;
}

.search {
    flex: 1;
}

Answer 2

尝试从上到下使用flex属性。从标题开始。然后相应地放置项目。

header {
  display: flex;
}

.logo,
.nav-wrapper,
.search,
.mega-menu-button {
  flex: 1 0 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-wrapper {
  flex-basis: 70%;
}

.nav-container {
  flex: 1;
}

.nav-container ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  padding: 0;
}

body {
  margin: 0;
}

<header>

  <div class="logo">Logo</div>

  <div class="nav-wrapper">
    <nav class="nav-container">
      <ul>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
      </ul>
    </nav>
  </div><!-- new; close .nav-wrapper -->

  <div class="search">
    <span class="search-text">Search</span>
  </div>

  <div class="mega-menu-button">
    <button>
       Menu
      </button>
  </div>

</header>

如何使用flexbox均匀分布嵌套和非嵌套对象？

2 个答案:

here