在flexbox中如何推动下一行元素接近上一行的右上方元素，没有负边距？ [英] in flexbox how to push next row element close to right top element of previous row, without negative margins?

问题描述

 < div class =container > 
< div class =elem-1> a< / div> 
< div class =elem-2> b< / div> 
< div class =elem-3> c< / div> 
< / div> 
  

是否有一种方法可以将最后一行元素关闭右顶部元素，而无需编辑html代码并使用负数利润率？

这个虚拟的css代码演示了什么我想得到，但没有负利润率

  .container {
 display：flex; 
 width：205px; 
 flex-wrap：wrap; 
 align-items：flex-start; 
} 
 .elem-1 {
 width：100px; 
 border：1px纯黑色; 
 height：100px; 
 
} 
 
 .elem-2 {
 width：100px; 
 border：1px纯黑色; 
 height：50px; 
} 
 
 .elem-3 {
 width：100px; 
 border：1px纯黑色; 
 height：100px; 
 margin-left：102px; //将元素向右推
 margin-top：-50px; // 
} 
  

在 elem-3 我推它到最后的顶部元素，有没有办法避免它，仍然使用flexbox，而不是浮动？

结果我试图得到：

< img src =https://i.stack.imgur.com/f6EIX.pngalt =在这里输入图片描述>

jsfiddle < a href =https://jsfiddle.net/j51o1cup/ =nofollow noreferrer> https://jsfiddle.net/j51o1cup/

解决方案

不，这不能使用Flexbox单独和动态内容。

如果您可以设置 container ，那么这里有一个技巧，使用伪元素来推送 elem-2 和 elem-3 添加到新列

通过使伪命令在 elem-1 和 elem-2 ，我们可以告诉它是完整的h八。当这样做，它会创建自己的列，保持 elem-1 左侧和 elem-2 和 elem-3 到右边

  .container {display：flex; flex-direction：column; flex-wrap：wrap; align-items：flex-start;身高：100vh; width：205px;}。container :: before {content：'';身高：100％ order：1;}。elem-1 {width：100px;边框：1px纯黑色; height：100px;}。elem-2 {width：100px;边框：1px纯黑色; height：50px; order：2;}。elem-3 {width：100px;边框：1px纯黑色; height：100px; order：2;}  

 < div class =container > < div class =elem-1> a< / div> < div class =elem-2> b< / div> < div class =elem-3> c< / div>< / div>  

$ b

I have three elements wrapped in flex container, by two in a row:

<div class="container">
  <div class="elem-1">a</div>
  <div class="elem-2">b</div>
  <div class="elem-3">c</div>
</div>

Is there a way to push last row element close right top element, without editing html code and using negative margins ?

this dummy css code demonstrates what I want to get, but without negative margins

.container {
    display:flex;
  width:205px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.elem-1 {
  width:100px;
  border:1px solid black;
  height:100px;

}

.elem-2 {
  width:100px;
  border:1px solid black;
  height:50px;
}

.elem-3 {
  width:100px;
  border:1px solid black;
  height:100px;
  margin-left:102px; // push element to the right
  margin-top:-50px;  // push to the top
}

with this negative margin on elem-3 I am pushing it to last top element, is there a way to avoid it and still use flexbox, not floats ?

result I try to get:

jsfiddle https://jsfiddle.net/j51o1cup/

解决方案

No, this can't be done using Flexbox alone and with dynamic content.

If you can set a height on the container, then here is a trick, using a pseudo element to push the elem-2 and elem-3 to a new column

By making the pseudo to be ordered between elem-1 and elem-2, we can tell it to be full height. When done like that, it will create its own column, keeping the elem-1 to the left and the elem-2 and elem-3 to the right

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 100vh;
  width: 205px;
}

.container::before {
  content: '';
  height: 100%;
  order: 1;
}

.elem-1 {
  width: 100px;
  border: 1px solid black;
  height: 100px;
}

.elem-2 {
  width: 100px;
  border: 1px solid black;
  height: 50px;
  order: 2;
}

.elem-3 {
  width: 100px;
  border: 1px solid black;
  height: 100px;
  order: 2;
}

<div class="container">
  <div class="elem-1">a</div>
  <div class="elem-2">b</div>
  <div class="elem-3">c</div>
</div>

这篇关于在flexbox中如何推动下一行元素接近上一行的右上方元素，没有负边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！