Question

我想使用带有多行的flexbox生成一个2列布局。右列应小而固定在右侧。左列应填充剩余空间，直到可见宽度已满，然后不破坏文本，但隐藏它（使用溢出）。

目前我正在使用以下代码，但不起作用：

.flex-container {
    display: flex;
    flex-direction: row;
}
.flex-1 {
    flex: 0 0 auto;
    border: 1px solid black;
    
}
.row {
    text-overflow: ellipsis;
    overflow: hidden;
}
.flex-2 {
    flex: 0 0 auto;
    border: 1px solid black;
}

<div class="flex-container">
    <div class="flex-1">
        <span class="row">
        Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma. Nullam sapien velizzle, its fo rizzle volutpizzle, suscipit for sure, brizzle vizzle, its fo rizzle. Pellentesque we gonna chung tortizzle. Sed eros. Stuff fizzle dolor dapibus turpizzle tempizzle shizznit. pellentesque nibh et turpizzle. Vestibulum izzle tortor. Gangsta mammasay mammasa mamma oo sa rhoncus fo shizzle. Izzle the bizzle habitasse bow wow wow dictumst. Dang dapibizzle. I'm in the shizzle we gonna chung urna, pretizzle eu, mattis mah nizzle, eleifend phat, nunc. Stuff suscipizzle. Integer sempizzle velit sizzle mofo.</span>
    </div>
    <div class="flex-2">XX</div>
</div>
<div class="flex-container">
        <div class="flex-1">
            <span class="row">
            Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma. Nullam sapien velizzle, its fo rizzle volutpizzle, suscipit for sure, brizzle vizzle, its fo rizzle. Pellentesque we gonna chung tortizzle. Sed eros. Stuff fizzle dolor dapibus turpizzle tempizzle shizznit. pellentesque nibh et turpizzle. Vestibulum izzle tortor. Gangsta mammasay mammasa mamma oo sa rhoncus fo shizzle. Izzle the bizzle habitasse bow wow wow dictumst. Dang dapibizzle. I'm in the shizzle we gonna chung urna, pretizzle eu, mattis mah nizzle, eleifend phat, nunc. Stuff suscipizzle. Integer sempizzle velit sizzle mofo.</span>
        </div>
        <div class="flex-2">XX</div>
    </div>

Answer 1

相对定位.flex-1，这样您就可以绝对定位您的范围.row。给它弯曲的.flex-1大小并应用你想要的溢出。

.flex-container{
  display: flex;
}
.flex-1{
  flex: 1;
  position: relative;
}
.row{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="flex-container">
  <div class="flex-1">
    <span class="row">
      Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma. Nullam sapien velizzle, its fo rizzle volutpizzle, suscipit for sure, brizzle vizzle, its fo rizzle. Pellentesque we gonna chung tortizzle. Sed eros. Stuff fizzle dolor dapibus turpizzle tempizzle shizznit. pellentesque nibh et turpizzle. Vestibulum izzle tortor. Gangsta mammasay mammasa mamma oo sa rhoncus fo shizzle. Izzle the bizzle habitasse bow wow wow dictumst. Dang dapibizzle. I'm in the shizzle we gonna chung urna, pretizzle eu, mattis mah nizzle, eleifend phat, nunc. Stuff suscipizzle. Integer sempizzle velit sizzle mofo.
    </span>
  </div>
  <div class="flex-2">XX</div>
</div>
<div class="flex-container">
  <div class="flex-1">
    <span class="row">
      Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma. Nullam sapien velizzle, its fo rizzle volutpizzle, suscipit for sure, brizzle vizzle, its fo rizzle. Pellentesque we gonna chung tortizzle. Sed eros. Stuff fizzle dolor dapibus turpizzle tempizzle shizznit. pellentesque nibh et turpizzle. Vestibulum izzle tortor. Gangsta mammasay mammasa mamma oo sa rhoncus fo shizzle. Izzle the bizzle habitasse bow wow wow dictumst. Dang dapibizzle. I'm in the shizzle we gonna chung urna, pretizzle eu, mattis mah nizzle, eleifend phat, nunc. Stuff suscipizzle. Integer sempizzle velit sizzle mofo.
    </span>
  </div>
  <div class="flex-2">XX</div>
</div>

Answer 2

.flex-container {
  display: flex;           /* Magic begins */
}
.flex-1 {
  flex: 1;                 /* Start at 0 width. Then grow to fill available space*/
  white-space: nowrap;     /* Prevent line breaks */
  overflow: hidden;        /* Hide overflow */
  text-overflow: ellipsis; /* Show ellipsis */
}

＆＃13;

.flex-container {
  display: flex;           /* Magic begins */
}
.flex-1 {
  flex: 1;                 /* Start at 0 width. Then grow to fill available space */
  white-space: nowrap;     /* Prevent line breaks */
  overflow: hidden;        /* Hide overflow */
  text-overflow: ellipsis; /* Show ellipsis */
  border: 1px solid black;
}
.flex-2 {
  border: 1px solid black;
}

＆＃13;

<div class="flex-container">
  <div class="flex-1">
    Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma. Nullam sapien velizzle, its fo rizzle volutpizzle, suscipit for sure, brizzle vizzle, its fo rizzle. Pellentesque we gonna chung tortizzle. Sed eros. Stuff fizzle dolor dapibus turpizzle tempizzle shizznit. pellentesque nibh et turpizzle. Vestibulum izzle tortor. Gangsta mammasay mammasa mamma oo sa rhoncus fo shizzle. Izzle the bizzle habitasse bow wow wow dictumst. Dang dapibizzle. I'm in the shizzle we gonna chung urna, pretizzle eu, mattis mah nizzle, eleifend phat, nunc. Stuff suscipizzle. Integer sempizzle velit sizzle mofo.
  </div>
  <div class="flex-2">XX</div>
</div>
<div class="flex-container">
  <div class="flex-1">
    Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma. Nullam sapien velizzle, its fo rizzle volutpizzle, suscipit for sure, brizzle vizzle, its fo rizzle. Pellentesque we gonna chung tortizzle. Sed eros. Stuff fizzle dolor dapibus turpizzle tempizzle shizznit. pellentesque nibh et turpizzle. Vestibulum izzle tortor. Gangsta mammasay mammasa mamma oo sa rhoncus fo shizzle. Izzle the bizzle habitasse bow wow wow dictumst. Dang dapibizzle. I'm in the shizzle we gonna chung urna, pretizzle eu, mattis mah nizzle, eleifend phat, nunc. Stuff suscipizzle. Integer sempizzle velit sizzle mofo.
  </div>
  <div class="flex-2">XX</div>
</div>

＆＃13;

Flexbox 2列布局，溢出

2 个答案: