Flex包装 - 反向正常内容顺序？

Question

Flex包装 - 反向正常内容顺序？

Mat*_*tch 3 html css css3 flexbox

我有三个盒子,我想将各种组合放入一个容器中.盒子有时会以组合形式出现,有时则不然.

如果所有三个盒子都放在容器中,顶部应该有一个全宽的盒子,下面有一个两个半宽的盒子.

如果容器中有两个盒子,那么应该只有两个半宽盒子.

如果有一个盒子,它应该是全宽的.

我想出了一个使用wrap:wrap-reverse的解决方案,但它要求你在html中以相反的顺序放置元素.轻微的烦恼.

所以我使用了flex-direction:row-reverse和order来反转内容的顺序.

我对这个解决方案有一个小问题,因为如果我们想让相同的css处理5个盒子,那么使用order会产生一个不太灵活的解决方案.

现在我倾向于不使用顺序而只是生活在颠倒的HTML中.你怎么看？我在某个地方错过了一颗银弹吗？

https://jsfiddle.net/uesje5dq/

.container {
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
}

.item {
  flex: 1;
  flex-basis: 50%;
}

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

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

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

Run Code Online (Sandbox Code Playgroud)

================================================== =========================

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="style.css"> 
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div class="container">
    <div class="item" style="height: 100px;width:100%;background-color: red;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: green;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: blue;"></div>
  </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

LGS*_*Son 5

如果你结合使用first-child,nth-last-child你可以计算孩子的数量,如果只有1或3,第一个是全宽,否则它们是半宽.

而.item:first-child:nth-last-child(3)规则的工作原理是,当第一个孩子,也是从3月底,我们知道有3项,并在规则中踢.

堆栈代码段

.container {
  display: flex;
  flex-wrap: wrap;
}

.item:only-child,
.item:first-child:nth-last-child(3) {
  flex-basis: 100%;
}

.item {
  flex-basis: 50%;
}

Run Code Online (Sandbox Code Playgroud)

  <div class="container">
    <div class="item" style="height: 100px;width:100%;background-color: red;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: green;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: blue;"></div>
  </div>
<hr>
  <div class="container">
    <div class="item" style="height: 100px;width:100%;background-color: red;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: green;"></div>
  </div>
<hr>
  <div class="container">
    <div class="item" style="height: 100px;width:100%;background-color: red;"></div>
  </div>

Run Code Online (Sandbox Code Playgroud)

使用此逻辑,您还可以检查是否有5,以及何时,使第一个全宽和其余一半.

堆栈代码段

.container {
  display: flex;
  flex-wrap: wrap;
}

.item:only-child,
.item:first-child:nth-last-child(3),
.item:first-child:nth-last-child(5) {
  flex-basis: 100%;
}

.item {
  flex-basis: 50%;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
    <div class="item" style="height: 100px;width:100%;background-color: red;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: green;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: blue;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: yellow;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: purple;"></div>
  </div>

Run Code Online (Sandbox Code Playgroud)

或者在未知数量的物品上,当数量不均匀时,第一个具有全宽度而其余部分具有宽度.

堆栈代码段

.container {
  display: flex;
  flex-wrap: wrap;
}

.item:first-child:nth-last-child(odd) {
  flex-basis: 100%;
}

.item {
  flex-basis: 50%;
}

Run Code Online (Sandbox Code Playgroud)

<div>9 items</div>

<div class="container">
    <div class="item" style="height: 100px;width:100%;background-color: red;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: green;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: blue;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: yellow;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: purple;"></div>

    <div class="item" style="height: 100px;width:100%;background-color: red;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: green;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: blue;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: yellow;"></div>
  </div>
  
<div><br>7 items</div>

<div class="container">
    <div class="item" style="height: 100px;width:100%;background-color: red;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: green;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: blue;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: yellow;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: purple;"></div>

    <div class="item" style="height: 100px;width:100%;background-color: red;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: green;"></div>
  </div>

<div><br>6 items</div>

<div class="container">
    <div class="item" style="height: 100px;width:100%;background-color: red;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: green;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: blue;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: yellow;"></div>
    <div class="item" style="height: 100px;width:100%;background-color: purple;"></div>

    <div class="item" style="height: 100px;width:100%;background-color: red;"></div>
  </div>

Run Code Online (Sandbox Code Playgroud)

这里有几个有趣的方法来计算孩子的数量:

1000%真棒.特别是:first-child:nth-last-child(odd)combo. (2认同)

归档时间：	8 年前
查看次数：	468 次
最近记录：	8 年前