Question

我有一个包含flexbox的包装器div，其中包含另外两个div：

右手div中还有3个其他div，一个是搜索栏

有没有办法可以使用flexbox来填充所有可用空间，除非父母被迫缩小？

这是我的CSS

.header-nav {
  background: $storm;
  .container {
    display: flex;
    justify-content: space-between;
  }
  .logo {
    display: block;
  }
  a {
    color: #fff;
    text-decoration: none;
  }
  .is-search {
    display: flex;
    align-items: center;
    background:yellow;
  }
}

.header-nav-profile {
  display: flex;
}

.block-menu,
.inline-menu {
  display: flex;
  margin: 0;
  padding: 0;
  li {
    list-style: none;
  }
}

.inline-menu {
  display: flex;
  align-items: center;
  a {
    padding: 2px 12px 2px 10px;
  }
}

.block-menu {
  border-left: 1px solid $grey;
  border-right: 1px solid $grey;
  a {
    display:block;
    padding: 25px;
    box-sizing: border-box;
  }
  li + li a,
  .is-search {
    border-left: 1px solid $grey;
  }
  .is-search {
    padding-left: 18px;
    padding-right: 18px;
    // flex-basis: 280px;
  }
}

和HTML

<div class="header-nav">
  <div class="container">
    <div class="header-nav-profile">
      <a href="/">
        <img src="http://placehold.it/80x80" alt="Logo" class="logo">
      </a>
      <ul class="inline-menu">
        <li>
          <a href="#">Name</a>
        </li>
        <li class="has-icon">
          <a href="#">Add bookmark</a>
        </li>
        <li>
          <a href="#">View bookmark</a>
        </li>
      </ul>
    </div>
    <ul class="block-menu">
      <li>
        <a href="#">Dashboard</a>
      </li>
      <li>
        <a href="#">Period</a>
      </li>
      <li>
        <a href="#">Filters</a>
      </li>
      <li class="is-search">
        <div class="search">
          <input type="text" placeholder="Search">
          <span class="submit"></span>
        </div>
      </li>
    </ul>
  </div>
</div>

如果你想尝试一下，我有一个演示链接：

https://codepen.io/EightArmsHQ/pen/dmZxRv?editors=1100

我希望搜索栏有一个很好的长度（比其div中的其他两个项目长）然后随着宽度变小，它才会开始缩小。

Answer 1

尝试使用max-width: pixel amount;和max-height: pixel amount;。

它不起作用，可以使用@media标签。

.selector {
  width: normal width;
}

@media (max-width: 800px) {
  .selector {
    width: percent amount; /* Width when window is thinner than 800px */
  }
}

Answer 2

修改你的阻止菜单类：

.block-menu {
        border-left: 1px solid grey;
        border-right: 1px solid grey;
    flex-grow:1;
    justify-content:flex-end
}

基本上，您可以使用flex-grow占用可用空间，然后justify-content:flex-end将它们移动到容器的右侧（结束）。

here

提供最佳的弹性框宽度，但在父级空间不再增加时允许缩小

2 个答案: