UI
遇到類似這樣的布局袁翁，不用想柴底，直接Flex一把梭。
沒(méi)兩下我們的dom結(jié)構(gòu)就出來(lái)了：
<div class="wrapper">
<div class="left">
<div class="start">A.</div>
<div class="center">BCDEFGHIJKLMNOPQRST</div>
<div class="end">XYZ</div>
</div>
<!-- 右側(cè)寬度不固定粱胜，但需要一行展示 -->
<div class="right">Some thing</div>
</div>
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: 300px;
background: #eee;
padding: 4px;
border-radius: 4px;
border: 1px solid #ddd;
}
.right {
flex-shrink: 0;
margin-left: 8px;
}
.left {
display: flex;
}
.start {
background: #ddd;
}
.center {
margin: 0 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.end {
background: #ccc;
}
結(jié)果
結(jié)果溢出了???♂????♀?
想：
- “咦柄驻，好像哪里不對(duì)。沒(méi)給
center設(shè)置寬度焙压，肯定不能出現(xiàn)省略號(hào)呀鸿脓！” - "那我怎么知道寬度是多少？涯曲，右側(cè)內(nèi)容不定寬耙翱蕖！"
于是
.left {
display: flex;
width: 100%;
}
還是不行（100%那是真的傻）
再想：
- “既然右側(cè)寬度是不被壓縮固定的幻件，那么使用
flex后左側(cè)的寬度肯定也是固定的安η！“ - ”既然左側(cè)寬度已知绰沥，那只要left不超過(guò)這個(gè)寬度或者超過(guò)隱藏蓉驹，那么它子元素就一定會(huì)省略！“
于是
.left {
display: flex;
overflow: hidden;
}
成功.png
.left {
display: flex;
flex-basis: 0;
flex-grow: 1;
/* 以上兩個(gè)可以偷懶用flex: 1 */
/* flex: 1; */
width: 0;
}
當(dāng)然也成功啦揪利！
這有份寫(xiě)好的代碼态兴，自己動(dòng)手試試吧！
