Question

我试图将一个元素放置在其他两个同级元素的下方和右侧。但是我只找到了使用基于浮动的布局的解决方案。

是否可以像下面的示例一样使橙色框显示在红色框的右侧？我需要使用flexbox而不设置max-height，因为这是由内容决定的。

.wrapper {
display: flex;
max-width: 400px;
height: 100%;
width: 400px;
flex-direction: row;
flex-wrap: wrap;
background: lightgrey;
}

.bigbox {
  width: 200px;
  background: red;
}

.smallbox1 {
  width: 200px;
  height: 200px;
  background: green;
}

.smallbox2 {
width: 100px;
  height: 200px;
  background: orange;  
}

<div class="wrapper">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
<div class="smallbox1"></div>
<div class="smallbox2"></div>
</div>

Answer 1

希望这就是您想要的。将小盒子组合在一起，并将其设置为flex-diretion: column

.wrapper {
display: flex;
max-width: 300px;
height: 100%;
width: 400px;
flex-direction: row;
flex-wrap: wrap;
background: lightgrey;
}
.wrapper-2 {
display: flex;
max-width: 300px;
max-height: 400px;
width: 400px;
flex-direction: column;
flex-wrap: wrap;
background: lightgrey;
}
.column{
  display: flex;
  flex-direction: column;
}
.bigbox {
  width: 200px;
  background: red;
  /*height: 100%; If you don't want the big box to take full height with flex wrap*/
}

.smallbox1,.smallbox2 {
  width: 100px;
  height: 200px;
}

.smallbox1 {
  background: green;
}

.smallbox2 {
  background: orange;  
}

<div class="wrapper">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
  <div class="column">
    <div class="smallbox1"></div>
    <div class="smallbox2"></div>
  </div>
</div>
<hr/>
<div class="wrapper-2">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
 <div class="smallbox1"></div>
 <div class="smallbox2"></div>
</div>

Answer 2

我建议在flexbox上使用css-grid，因为我们正在谈论二维布局（flexbox非常适合一维布局）。

您只需要在代码中更改/添加3行：

包装器需要display:grid，而大盒子需要grid-column: 1和grid-row: 1 / 3

我在代码段中添加了一些额外的文本，以表明这取决于内容。

检查以下代码段

.wrapper {
  max-width: 400px;
  height: 100%;
  width: 400px;
  background: lightgrey;
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 100%;
  grid-auto-flow: column;
}

.bigbox {
  width: 200px;
  background: red;
  grid-column: 1;
  grid-row: 1 / 3;
}

.smallbox1 {
  height: 200px;
  background: green;
}

.smallbox2 {
  background: orange;
}

<div class="wrapper">
  <div class="bigbox">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor
    sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.magna. Nullam sed massa luctus.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
  <div class="smallbox1"></div>
  <div class="smallbox2"></div>
</div>

我发现这份css-grid备忘单非常有用，

官方docs在这里

浏览器支持here

Answer 3

我用order

.wrapper {
display: flex;
max-width: 300px;
height: 100%;
width: 300px;
flex-direction: row;
flex-wrap: wrap;
background: lightgrey;
}

.bigbox {
  width: 200px;
  background: red;
  order:1;
}

.smallbox1,.smallbox2 {
  width: 100px;
  height: 200px;
}

.smallbox1 {
  background: green;
  order:3;
  
}

.smallbox2 {
  background: orange;  
  order:2;
}

<div class="wrapper">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
<div class="smallbox1"></div>
<div class="smallbox2"></div>
</div>

在基于flex的布局中浮动元素

3 个答案: