仅当Flexbox收缩柱宽于容器的一半时才使用它 [英] Using flexbox shrink column only if it is wider than half of the container

问题描述

请看我的图纸：

这里是描述：

（1）我有一个两列的flexbox。我希望它的工作方式如下：当其中一个框大于宽度的一半，并且两个框都有空格时，则什么都不做。 （或者按比例拉伸）如果其中一个框大于一半，但两个框都不合适，那么只收缩大于一半的框。

$ b $（4）如果两个大于一半的盒子都按比例缩小。

这是一个例子，希望看到这种情况发生：
来查看工作模式。

Please look at my drawing:

Here is description:
(1) I have a flexbox with two columns. I want it to work as follows: When one of the boxes bigger than half of the width and there is a space for both boxes, then do nothing. (or stretch both proportionally)

(3) If one of the boxes bigger than half but both boxes don't fit - than shrink only the one that is bigger than half.

(4) If both boxes bigger than half - shrink both proportionally.

This is an example where I want to see this to happen: http://jsbin.com/upArEVI/3/edit

Here is how it works in the code example above graphically:

And here is the code:

body{
  width: 100%;
  padding:0;
  margin:0;
  background: white;
}
.line{
  display: flex;
  height: 50px;
  border-top:1px solid lightgray;
  border-bottom:1px solid lightgray;
}
.left, .right{
  flex: 0 1 auto;
  overflow:hidden;
  text-overflow: ellipsis;
  background: rgba(0,200,0,0.1);
  white-space: nowrap;
  border-right:2px solid black;
}
.right{
  text-align: right;
  flex: 1 1 auto;
  background: rgba(0,0,200,0.1);
}
.middle{
  position: absolute;
  top:0;
  width:50%;
  height: 100%;
  border-right:2px dotted red;
}

With html

<div class="line">
  <div class="left">
    something 2 something 3
  </div>
  <div class="right">
    something 5
  </div>
</div>

解决方案

See if this is what you're looking for:

* {
  padding:0;
  margin:0;
}
.line{
  display: flex;
  height: 50px;
  border-top:1px solid lightgray;
  border-bottom:1px solid lightgray;
}
.left, .right{
  flex: 1 auto;
  text-overflow: ellipsis;
  background: rgba(0,200,0,0.1);
  border-left:1px solid lightgray;
  border-right:1px solid lightgray;
  overflow: hidden;
  white-space: nowrap;
}
.right{
  text-align: right;
  background: rgba(0,0,200,0.1);
}

<div class="line">
  <div class="left">
    something 2 something 3 something 4
  </div>
  <div class="right">
    something 5 something 5 something 6
  </div>
</div>
<div class="line">
  <div class="left">
    something 2 something 3 something 4 something 4 
  </div>
  <div class="right">
    something 5 something 5 something 6
  </div>
</div>
<div class="line">
  <div class="left">
    something 2 something 3 something 4 something 4 something 4  
  </div>
  <div class="right">
    something 5 something 5 something 6
  </div>
</div>

And here's a link to see a working model.

这篇关于仅当Flexbox收缩柱宽于容器的一半时才使用它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！