Question

我有包装的伸缩盒11111 22222和33333。

它们像这样包裹：

         3333333
222222222222 
11111

但是我需要他们像这样包裹

11111  33333333
222222222222

下面是到目前为止的代码，这是指向代码笔的链接：https://codepen.io/anon/pen/oRrzzQ

.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  text-align: center;
}

.content2 div {
  height: 50%;
  width: 300px;
}
.red {
  background: orangered;
  margin-right: auto;
}
.green {
  background: yellowgreen;
  margin-right: auto;
}
.blue {
  background: steelblue;
  margin-left: auto;
}


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

<div class="content2">
    <div class="red">1</div>
  <div class="green" style="width:60%">2</div>
  <div class="blue">3</div>
</div>

Answer 1

您可以通过display: grid轻松实现这一目标，但是出于Flex中的要求，我在代码中添加了一些更改

.content2 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
  display: flex;
flex-direction: column;
  flex-wrap: wrap;
}

.content2 div {
    height: 50%;
  width: 50%;
}
.red {
    background: orangered;
}
.green {
    background: yellowgreen;
}
.blue {
    background: steelblue;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap -->


<div class="content2">
    <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Answer 2

使用您的代码进行了调整。

.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.content2 div {
  height: 50%;
}

.red {
  width: 40%;
  background: orangered;
  margin-right: auto;
}
.green {
  width: 60%;
  background: yellowgreen;
  margin-right: auto;
}

.blue {
  width: 100%;
  background: steelblue;
  margin-left: auto;
}


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

弹性框项目位置自定义订购

2 个答案: