UI
遇到类似这样的布局,不用想,直接Flex一把梭。
没两下我们的dom
结构就出来了:
A.
BCDEFGHIJKLMNOPQRST
XYZ
Some thing
.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;
}
结果
结果溢出了♂️♀️
想:
- “咦,好像哪里不对。没给
center
设置宽度,肯定不能出现省略号呀!” - "那我怎么知道宽度是多少?,右侧内容不定宽啊!"
于是
.left {
display: flex;
width: 100%;
}
还是不行(100%
那是真的傻)
再想:
- “既然右侧宽度是不被压缩固定的,那么使用
flex
后左侧的宽度肯定也是固定的啊!“ - ”既然左侧宽度已知,那只要left不超过这个宽度或者超过隐藏,那么它子元素就一定会省略!“
于是
.left {
display: flex;
overflow: hidden;
}
成功.png
.left {
display: flex;
flex-basis: 0;
flex-grow: 1;
/* 以上两个可以偷懒用flex: 1 */
/* flex: 1; */
width: 0;
}
当然也成功啦!
这有份写好的代码,自己动手试试吧!