flexbox | flex项目从包含div推出（屏幕外）

iteles 发表于 Dev

Iteles

我正在使用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: 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。