Flex box 项目位置自定义排序答案

【问题标题】：Flex box item position custom orderingFlex box 项目位置自定义排序
【发布时间】：2019-10-22 09:06:50
【问题描述】：

我有 11111 22222 和 33333 可以换行的弹性盒子。

它们是这样包装的：

         3333333
222222222222 
11111

但我需要它们像这样包装

11111  33333333
222222222222

下面是目前的代码，这里是codepen的链接：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>

【问题讨论】：

你可以用order CSS属性来实现
@NishargShah 请发布答案以便我接受
Flexbox 在 1 轴上工作，试试 CSS Grid。 css-tricks.com/snippets/css/complete-guide-grid
@realPro 我添加了答案，请注意
可能重复 - stackoverflow.com/questions/37489270/…

标签： css flexbox

【解决方案1】：

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

.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】：

您可以通过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>

【讨论】：