我有一个布局,我想让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>
答案 0 :(得分:2)
您可以使用flex-grow: 1;
或速记flex: 1;
以及min-width
或overflow
。
.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>