小编ite*_*les的帖子
flexbox | 弹出项目被推出包含div(关闭屏幕)
我正在使用flexbox布局来设置过去任务列表的样式.任务描述和时间总是变化很大.
一切都看起来很棒,直到输入的任务描述足够长以包裹到第二行,然后将"时间"项目(在屏幕的最右侧)略微向右推 - 离开屏幕 - 隐藏一些内容.
你可以在下面看到完整的简短描述,但是很长的一个会将屏幕上的"00:08"推出,并且任务描述也会向左移动!
这是代码的小提琴(根据Stackoverflow的规则在下面).如果您调整包含结果的窗格的大小, '00:08'不会从页面上掉落,但它确实向右移动太远.
上面的屏幕截图是在Chrome或Safari(我使用的两个浏览器)缩小窗口宽度直到描述包装到第二行时.
如果可能的话,我想按照第一个(简短描述)行显示所有内容!并且还要理解为什么它的行为与目前一样.
PS我试过使用浮动并使用表格显示布局,但这两种技术都引起了相当多的错误,主要是因为内容的长度可变(所以请不要将它们作为替代品:)).
ul {
margin:0;
padding: 0;
}
#tasklist{
width: 100%;
}
.task-one-line{
display: flex;
flex-direction:row;
flex-wrap: nowrap;
justify-content: space-between;
align-item: baseline; /*flex-end*/
display: -webkit-flex;
-webkit-flex-direction:row;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;
-webkit-align-item: baseline;
border-bottom: 1px solid #d3d3d3;
width: 100%;
}
.task-one-line i{
width:1.5em;
padding: 0.5em 0.3em 0.5em 0.3em;
/*border: 1px solid green;*/
}
span.task-desc{
flex-grow: 5;
-webkit-flex-grow: 5;
text-align:left;
padding: 0.3em 0.4em 0.3em 0.4em;
/*border: …12
推荐指数
推荐指数
2
解决办法
解决办法
3万
查看次数
查看次数