展开多个flexbox项以适合容器宽度

时间:2018-03-26 16:35:07

标签: css css3 flexbox

我有一个布局,我想让breadcrumb路径占用行中所有可用空间。在同一行中,我还有一个div(.tools),它需要具有动态宽度,因为它的内容可能会有所不同。

目前我必须将痕迹路径设置为%宽度才能使其正常工作,但这并不理想......我希望它只是扩展以填充可用空间。

有什么想法吗?

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background-color: lightgreen;
  width: 100%;
  box-sizing: border-box;
}

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  width: 55%;
  background-color: lightblue;
}

.breadcrumbItem {
  display: flex;
  flex: 0 10 auto;
  min-width: 45px;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbItem button {
  border: 0;
  background: none;
  padding: 0 5px;
  flex: 0 1 auto;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tools {
  display: flex;
  justify-content: flex-end;
  background-color: lightyellow;
}
.tools span, .tools button {
  white-space: nowrap;
}
<header>
  <div class="breadcrumb">
    <div class="breadcrumbItem">
      <button>Really long breadcrumb item here</button>
      <span>
        <span>></span>
      </span>
    </div>
    <div class="breadcrumbItem">
      <button>Another really long item that should ellipse when it gets too long, oidsf jsodifj dsoifj sdoifj sdoifj sdoifj sdoifj sdoifj sdoifj dsoifj sdoifj sd</button>
    </div>
  </div>
  <div class="tools">
    <span>0 photos selected</span>
    <button>Button</button>
  </div>
</header>

https://codepen.io/anon/pen/NYaQyV

3 个答案:

答案 0 :(得分:2)

您可以使用flex-grow: 1;或速记flex: 1;以及min-widthoverflow

.breadcrumb {
  ...
  flex: 1;
  min-width: 0;
}

或者

.breadcrumb {
  ...
  flex: 1;
  overflow: hidden;
}

<强> CodePen

答案 1 :(得分:1)

通过将flex: auto添加到.breadcrumb selctor块,您可以实现所需目标。很多你的css声明都是多余的。您需要查看它们并将选择器分组,共享声明

header {
  -webkit-display: flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background-color: lightgreen;
  width: 100%;
  box-sizing: border-box;
}
.breadcrumb {
  flex: auto; //note this line .you can change it to auto as well
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  background-color: lightblue;
}
.breadcrumbItem {
  flex: auto;
  min-width: 45px;
  overflow: hidden;
  text-overflow: ellipsis;
}

答案 2 :(得分:1)

您的代码中存在大量冗余。这是一个可以实现目标的简化版本。

header {
  display: flex;
  padding: 16px 20px;
  background-color: lightgreen;
}
.breadcrumb {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  background-color: lightblue;
}
.breadcrumbItem {
  display: flex;
}
button {
  border: 0;
  background: none;
  padding: 0 5px;
}
.breadcrumbItem:last-child {
  overflow: hidden;
}
.breadcrumbItem:last-child button { /* ellipsis on second button only */
  overflow: hidden;
  text-overflow: ellipsis;
}
.tools {
  margin-left: auto;
  background-color: lightyellow;
}
* {
  box-sizing: border-box;
  white-space: nowrap;
}
<header>
  <div class="breadcrumb">
    <div class="breadcrumbItem">
      <button>Really long breadcrumb item here</button>
      <span>
        <span>></span>
      </span>
    </div>
    <div class="breadcrumbItem">
      <button>Another really long item that should ellipse when it gets too long, oidsf jsodifj dsoifj sdoifj sdoifj sdoifj sdoifj sdoifj sdoifj dsoifj sdoifj sd</button>
    </div>
  </div>
  <div class="tools">
    <span>0 photos selected</span>
    <button>Button</button>
  </div>
</header>

revised codepen