基本上，在一個容器中，我在ul.li這些選項卡旁邊有選項卡（帶有 ）和另一個 div（搜索框），它們使用 flex 連續顯示。
我希望它按照以下作業流程做出回應：
- 如果寬度增加，則搜索部分會增加以適應可用空間。我設法使用該物業
flex-basis: 100% - 如果寬度減小，則搜索部分也會隨著屬性而減小
flex-basis: 100%。但是，我希望搜索部分減少到100 像素，然后選項卡將減少顯示省略號。由于我不是 flexbox 專家，因此我嘗試使用flex-shrink或不成功。flex-grow
我復制了一個最簡單的例子來說明我在說什么。
body {
padding: 50px;
font-family: sans-serif;
}
.container {
resize: horizontal;
overflow: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border: 1px solid black;
}
.tabs__list {
align-items: flex-start;
display: flex;
list-style: none;
margin: 0;
padding: 0;
border-bottom: 0;
margin-right: 28px;
width: unset;
}
button {
height: 34px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search {
flex-basis: 100%;
height: 34px;
align-self: end;
min-width: 100px;
background-color: blue;
}<div class="container">
<ul class="tabs__list">
<li>
<button type="button">Tab Item Number One</button>
</li>
<li>
<button type="button">Tab Item Number Two</button>
</li>
</ul>
<div class="search"></div>
</div>uj5u.com熱心網友回復：
您需要利用flex-grow,flex-shrink和容器flex-basis子級的屬性。flex
這是 Kevin Powell 的非常方便的 youtube 教程，解釋了這些屬性和其他重要的彈性盒概念。
無論如何，這里有一個解決您的問題的方法，其中的注釋解釋了添加的內容和原因。
body {
padding: 50px;
font-family: sans-serif;
}
.container {
resize: horizontal;
display: flex;
overflow: auto;
align-items: center;
flex-wrap: nowrap;
/* don't allow items to go to a new line on shrink */
border: 1px solid black;
min-width: 138px;
/* 100px for the div.search width 10px inline padding for div.search 28px margin-rigt from ul.tabs__list */
}
.tabs__list {
flex-grow: 0;
/* this forbids ul from growing, so only div.search can take the remaining space */
flex-shrink: 1;
/* this allows ul to shrink */
flex-basis: content;
list-style: none;
margin: 0;
padding: 0;
border-bottom: 0;
margin-right: 28px;
overflow: hidden;
/* styling the ul with nowrap so that the li's do not go on the next line on shrink */
display: flex;
flex-wrap: nowrap;
}
.search {
flex-grow: 1;
/* this allows div.search to grow and take up the remaining space */
flex-shrink: 0;
/* this forbids div.search to shrink below 100px */
flex-basis: 100px;
/* this works quite like min-width: 100px; but not exactly the same */
align-self: end;
height: 45px;
background-color: blue;
/* more suggested styling to div.search */
color: white;
display: flex;
align-items: center;
padding: 5px;
}
.tabs__list li {
/* display: inline; */
margin: 5px;
padding: 5px;
flex: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* the following styling is applied to give li's the look of a button */
border: black 1px solid;
text-align: center;
background-color: lightgray;
cursor: pointer;
}
.tabs__list li:hover {
background-color: gray;
color: white;
}<div class="container">
<ul class="tabs__list">
<li> Tab Item Number One</li>
<li>Tab Item Number Two</li>
</ul>
<div class="search">Search</div>
</div>uj5u.com熱心網友回復：
一個元素需要ellipsis作業的最重要的事情是寬度。如果沒有寬度，瀏覽器將不知道文本何時從其預定義的寬度實際被剪切。我將容器的寬度設定為100%. 然后將每個子元素 (tabs__list和search) 設定為 50%。我還將 設定li為 50%，因此每個專案將占用該空間的一半。但是，我仍然有足夠flex-basis: 100%;的search空間。
使用此設定，您現在可以設定width: 100%;為您的button，這是它需要的定義寬度，因此它知道文本被截斷并且需要顯示省略號。
旁注：你仍然可以添加你min-width: 100px;的search，它仍然會顯示省略號，但我洗掉了它，因為它顯示了一個垂直滾動條。
body {
padding: 50px;
font-family: sans-serif;
}
.container {
resize: horizontal;
overflow: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border: 1px solid black;
width: 100%;
}
.tabs__list {
align-items: flex-start;
display: flex;
list-style: none;
margin: 0;
padding: 0;
border-bottom: 0;
margin-right: 28px;
width: 25%;
}
li {
width: 50%;
}
button {
height: 34px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search {
flex-grow: 1;
flex-basis: 100%;
width: 75%;
min-width: 100px;
height: 34px;
align-self: end;
background-color: blue;
}<div class="container">
<ul class="tabs__list">
<li>
<button type="button">Tab Item Number One</button>
</li>
<li>
<button type="button">Tab Item Number Two</button>
</li>
</ul>
<div class="search"></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/447926.html
上一篇：從引導程式中獲取的導航欄沒有折疊
下一篇：按類或ID拖放div元素