用flexbox制作S形

Question

我正在尝试使用flex重现这种布局结构。

ooo
  o
ooo
o
ooo
  o
ooo

我可以使用常规显示块/内联块来实现这一点，但我只是为了定位而包装了一些元素，而且感觉很乱。

span {
  display:inline-block;
  width: 100px;
  height:100px;
  background:black;
  color:white;
  font-size:11px;
}

.new {
  display:block;
}

.right {
  margin-left:200px;
}

* {
  font-size:0;
  margin:0;
  padding:0;
}

.alignright {
    direction: rtl;
}

section {
   width:300px;
}

<section>

  <span class="row">1</span>
  <span class="row">2</span>
  <span class="row">3</span>

  <span class="new right">4</span>
  <span class="new right">5</span>

  <div class="alignright">
  <span class="row t">6</span>
  <span class="row t">7</span>
  <span class="row t">8</span>
  </div>
  
  <span class="new">9</span>
  <span class="new">10</span>

  <span class="row">11</span>
  <span class="row">12</span>
  <span class="row">13</span>
  
</section>

这是否可以在flex中进行，没有DIV包装和多个类？

Answer 1

这可以使用flexbox和nth-child

来实现

您可以使用nth-child标记哪些元素要左右对齐，而flexbox order属性意味着您不需要任何嵌套。

需要进行以下更改：

• 将display: flex;和flex-wrap: wrap;添加到section，让其子级使用弹性箱模型并换行新行
• 使用span:nth-child(-n+5)添加order: 1; - 这将告诉您首先订购前5个元素
• 使用span:nth-child(4), span:nth-child(5)添加margin-right: 200px; - 这将强制第四和第五个元素占用右侧的额外空间并将后续元素推送到新行
• 使用span:nth-child(8)添加order: 2; - 这将在前五个之后订购第八个元素
• 使用span:nth-child(7)添加order: 3; - 这将在第八个
之后订购第七个元素
• 使用span:nth-child(6)添加order: 4; - 这将在第七个
之后订购第六个元素
• 使用span:nth-child(n+9)添加order: 5; - 这将在第六个之后订购最后5个元素
• 使用span:nth-child(9), span:nth-child(10)添加margin-left: 200px; - 这会强制第九和第十个元素占用左侧的额外空间并将后续元素推送到新行

* {
  font-size: 0;
  margin: 0;
  padding: 0;
}
section {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}
span {
  background: black;
  color: white;
  font-size: 11px;
  height: 100px;
  width: 100px;
}
span:nth-child(-n+5) {
  order: 1;
}
span:nth-child(4),
span:nth-child(5) {
  margin-left: 200px;
}
span:nth-child(6) {
  order: 4;
}
span:nth-child(7) {
  order: 3;
}
span:nth-child(8) {
  order: 2;
}
span:nth-child(n+9) {
  order: 5;
}
span:nth-child(9),
span:nth-child(10) {
  margin-right: 200px;
}

<section>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
  <span>11</span>
  <span>12</span>
  <span>13</span>
</section>