更改弹性项目的顺序

Question

我有一个包含多个div的容器，并且正在使用flexbox模型。我想用css实现以下功能，虽然我不能改变div标签的顺序。

在第二行中，值为“8”的div必须先出现。

我附上了codepen链接。

.container {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  // align-items:flex-start;
  align-content: space-around;
  justify-content: flex-start;
}

.item {
  background-color: tomato;
  box-sizing: border-box;
  padding: 20px;
  outline: 2px solid blue;
  flex-basis: 20%;
}

.item-inside {
  display: none;
  background-color: #ABABAB;
  box-sizing: border-box;
  padding: 20px;
  outline: 1px solid red;
  flex-basis: 80%;
}

.show {
  display: block;
}

.hide {
  display: none;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">8</div>
  <div class="item">7</div>
  <div class="item">6</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">8</div>
  <div class="item">12</div>
</div>

Answer 1

如果我了解最终目标，您可以使用:nth-child()和order重新排序。

＆＃13;

＆＃13;

.container {
	position: relative;
	display: flex;
	flex-flow: row wrap;
 // align-items:flex-start;
  align-content: space-around;
  justify-content:flex-start;
  
}

.item {
	background-color: tomato;
	box-sizing: border-box;
	padding: 20px;
	outline: 2px solid blue;
  flex-basis: 20%;
  
}
.item-inside{
  display:none;
  background-color: #ABABAB;
  box-sizing:border-box;
  padding: 20px;
  outline: 1px solid red;
  flex-basis:80%;
}

.show {
  display:block; 
 
}

.hide {
  display:none;
}

.item:nth-child(-n+5), .item:nth-child(8) {
  order: -1;
}

＆＃13;

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用CSS order属性。

默认情况下，所有弹性项目都设置为order: 0。

具有相同订单价值的元素按照它们在源代码中出现的顺序呈现。

div.item:nth-child(1)  { order: -1 }
div.item:nth-child(2)  { order: -1 }
div.item:nth-child(3)  { order: -1 }
div.item:nth-child(4)  { order: -1 }
div.item:nth-child(5)  { order: -1 }
div.item:nth-child(6)  { order:  1 }
div.item:nth-child(7)  { order:  1 }
div.item:nth-child(8)  { order:  0 }
div.item:nth-child(9)  { order:  1 }
div.item:nth-child(10) { order:  1 }
div.item:nth-child(11) { order:  1 }
div.item:nth-child(12) { order:  1 }

＆＃13;

＆＃13;

.container {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  /* align-items:flex-start; */
  align-content: space-around;
  justify-content: flex-start;
}

.item {
  background-color: tomato;
  box-sizing: border-box;
  padding: 20px;
  outline: 2px solid blue;
  flex-basis: 20%;
}

.item-inside {
  display: none;
  background-color: #ABABAB;
  box-sizing: border-box;
  padding: 20px;
  outline: 1px solid red;
  flex-basis: 80%;
}

.show {
  display: block;
}

.hide {
  display: none;
}

div.item:nth-child(1) {
  order: -1
}

div.item:nth-child(2) {
  order: -1
}

div.item:nth-child(3) {
  order: -1
}

div.item:nth-child(4) {
  order: -1
}

div.item:nth-child(5) {
  order: -1
}

div.item:nth-child(6) {
  order: 1
}

div.item:nth-child(7) {
  order: 1
}

div.item:nth-child(8) {
  order: 0
}

div.item:nth-child(9) {
  order: 1
}

div.item:nth-child(10) {
  order: 1
}

div.item:nth-child(11) {
  order: 1
}

div.item:nth-child(12) {
  order: 1
}

＆＃13;

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

＆＃13;

＆＃13;

＆＃13;