Question

是否可以在行的可用空间中呈现自定义元素？我的意思是我们有一行有3个元素。

例如：第一个和第二个渲染并向右对齐。它们有不同的宽度。在左边的自由空间中，我想渲染第三个元素。我问，因为我需要做智能css，这将在上面工作，但是当元素在右边或左边和右边的时候。

Answer 1

我不确定你需要什么，但我希望这有帮助，如果你告诉我exaclt你需要什么我可以更新代码

＆＃13;

.flex{
  display: flex;
  justify-content: space-between;
}

＆＃13;

<div class="flex">
 
  
  <div>
   <span>element 3</span>
  </div>
  
  <div>
   <span>element 1</span>
   <span>element 2</span>
  </div>
</div>

＆＃13;

Answer 2

你应该清楚地解释你想要什么，无论如何，我认为这是一个很好的开始你的案例有3列：FIDDLE

HTML：

<div class="flex-col">

  <div class="col one">
  ONE
  </div>

  <div class="col two">
  TWO
  </div>

  <div class="col three">
  THREE
  </div>

</div>

的CSS：

.col { 
  box-sizing:border-box;
  padding:10px;
  background:blue;
  text-align:center;
  border:solid 1px red;
}

.one { flex-grow:4; }
.two { flex-grow:2; }
.three { flex-grow:1; }

Flexbox - 在可用空间中呈现内容

2 个答案: