flexbox | flex项目从包含div推出(屏幕外) [英] flexbox | flex item being pushed out of containing div (off screen)
问题描述
我正在使用 flexbox布局进行样式设置过去任务的列表.任务描述和时间总是很可变.
一切看起来都很不错，直到输入了足够长的任务描述以换行到第二行，然后将时间"项(位于屏幕的最右边)稍微向右推-离开屏幕-隐藏一些内容.
您可以在下面看到简短的说明，但是长的说明将应为'00:08'的内容推离屏幕，任务说明也向左移动！
此处为代码的小提琴 (根据Stackoverflow的规则，以下为 ). 如果您调整包含结果的窗格的大小，则"00:08"不会从页面上消失，但显然会向右移动太远.
上面的屏幕截图是在Chrome或Safari(我正在使用的两个浏览器)中，当缩小窗口的宽度直到描述内容换行到第二行时.
如果可能，我希望所有内容都按照第一行(简短描述)显示！，还要了解为什么它会像现在这样运行.
P.S.我尝试过使用浮点数和表显示布局，但是这两种技术都引起了很多错误，主要是因为内容长度可变(所以请不要建议使用这些替代方法:)).
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: 1px solid red;*/
}
span.task-time{
flex-grow: 1;
-webkit-flex-grow: 1;
flex-basis:4em;
-webkit-flex-basis:4em;
text-align:right;
padding: 0.3em 0.5em 0.3em 0.5em;
/*border: 1px solid blue ;*/
}
<ul id="tasklist">
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">And a short one</span>
<span class="task-time">00:01</span>
</li>
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">Here's a super long long long long long long description that might wrap onto another line</span>
<span class="task-time">00:08</span>
</li>
</ul>
确实，您只希望文本内容具有灵活的宽度(时间和图标应具有固定的宽度而不要缩小).使用表，绝对定位或flexbox可以很容易地实现这一点.
这是您需要了解的flexbox:
.task-time: flex: 1 0 4em
.task-one-line i.fa { flex: 0 0 auto; }
ul {
margin:0;
padding: 0;
}
#tasklist{
width: 100%;
}
.task-one-line i.fa { flex: 0 0 auto; }
.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: 1px solid red;*/
}
span.task-time{
flex: 1 0 4em;
-webkit-flex: 1 0 4em;
text-align:right;
padding: 0.3em 0.5em 0.3em 0.5em;
/*border: 1px solid blue ;*/
}
<ul id="tasklist">
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">And a short one</span>
<span class="task-time">00:01</span>
</li>
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">Here's a super long long long long long long description that might wrap onto another line long long long long long long description that might wrap onto another line</span>
<span class="task-time">00:08</span>
</li>
</ul>
I'm using the flexbox layout to style a list of past tasks. The task description and the time are always going to be of very variable lengths.
Everything looks great until a task description is entered which is long enough to wrap onto a second line and then the 'time' item (on the far right of the screen) is pushed slightly to the right - off the screen - hiding some of the content.
You can see the short description displays perfectly below, but the long one pushes what should be '00:08' off the screen AND the task description moves to the left as well!!
Here's a fiddle for the code (which is below as per Stackoverflow's rules). If you resize the pane containing the result the '00:08' doesn't fall off the page but it does clearly move too far to the right.
The above screenshot is in Chrome or Safari (the two browsers I was using) when shrinking the width of the window until the description wraps onto a second line.
I would like everything to display as per the first (short description) line if possible! And also to understand why this is behaving as it currently is.
P.S. I have tried using floats and also using a table display layout but both of these techniques caused quite a few bugs, mostly because of the variable length content (so please don't suggest these as alternatives :)).
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: 1px solid red;*/
}
span.task-time{
flex-grow: 1;
-webkit-flex-grow: 1;
flex-basis:4em;
-webkit-flex-basis:4em;
text-align:right;
padding: 0.3em 0.5em 0.3em 0.5em;
/*border: 1px solid blue ;*/
}
<ul id="tasklist">
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">And a short one</span>
<span class="task-time">00:01</span>
</li>
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">Here's a super long long long long long long description that might wrap onto another line</span>
<span class="task-time">00:08</span>
</li>
</ul>
Really, you only want the text content to have a flexible width (the time and the icon should have a fixed width and not shrink). This could be pretty easily accomplished with tables, absolute positioning, or flexbox.
Here's the flexbox that you need to know:
.task-time: flex: 1 0 4em
.task-one-line i.fa { flex: 0 0 auto; }
ul {
margin:0;
padding: 0;
}
#tasklist{
width: 100%;
}
.task-one-line i.fa { flex: 0 0 auto; }
.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: 1px solid red;*/
}
span.task-time{
flex: 1 0 4em;
-webkit-flex: 1 0 4em;
text-align:right;
padding: 0.3em 0.5em 0.3em 0.5em;
/*border: 1px solid blue ;*/
}
<ul id="tasklist">
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">And a short one</span>
<span class="task-time">00:01</span>
</li>
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">Here's a super long long long long long long description that might wrap onto another line long long long long long long description that might wrap onto another line</span>
<span class="task-time">00:08</span>
</li>
</ul>
这篇关于flexbox | flex项目从包含div推出(屏幕外)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
