flex-flow：以反向顺序html和css的row-reverse wrap-reverse

发布时间：2020-12-15 02:10:59 所属栏目：百科来源：网络整理

导读：我有一个内容,我希望他们在行反向和包装 – 反向,但反向顺序. 这是代码： .a { height: 200px; width: 520px; padding: 5px 5px 5px 10px; display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; background-color: black;}.b { min-width:

我有一个内容,我希望他们在行反向和包装 – 反向,但反向顺序.
这是代码：

.a {
  height: 200px;
  width: 520px;
  padding: 5px 5px 5px 10px;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
  background-color: black;
}

.b {
  min-width: 120px;
  height: 90px;
  text-align: center;
  line-height: 90px;
  margin-right: 5px;
  background-color: aquamarine;
}

<div class="a">
  <div class="b">1</div>
  <div class="b">2</div>
  <div class="b">3</div>
  <div class="b">4</div>
  <div class="b">5</div>
  <div class="b">6</div>
</div>

订单应该颠倒过来.
请不要使用’order’属性来回答这个问题.
像这样的图像(抱歉编辑错误)：

请先查看代码输出然后再查看图像.

解决方法

我们可以利用 Quantity Queries来实现这个布局(不需要js！)

演示片段：

ul {
  list-style: none;
  min-height: 90px;
  width: 500px;
  padding: 5px;
  background-color: black;
  display: flex;
  flex-wrap: wrap;
}
li {
  display: inline-block;
  min-width: 120px;
  height: 90px;
  text-align: center;
  line-height: 90px;
  margin-right: 5px;
  margin-bottom: 5px;
  background-color: aquamarine;
}
li:nth-last-child(4n + 3):first-child {
  margin-left: 125px;
  background-color: pink;
}
li:nth-last-child(4n + 2):first-child {
  margin-left: 250px;
  background-color: blue;
}
li:nth-last-child(4n + 1):first-child {
  margin-left: 375px;
  background-color: green;
}
li:nth-last-child(4n):first-child {
  background-color: purple;
}

<ul>
  <li>1</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>
<hr>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

说明：

这里所需的布局基本上归结为从左到右的常规四列布局,第一个元素根据容器中有多少项进行缩进.

当有4n项(4,8,12等)时 – 不需要缩进.

当有4n个项目(1,5,9等)时 – 需要三项缩进.

当有4n 2项(2,6,10等)时 – 需要两项缩进.

当有4n 3项(3,7,11等)时 – 需要一项缩进.

相关CSS：

li:nth-last-child(4n + 3):first-child {
  margin-left: 125px; /* one-item indentation */
}
li:nth-last-child(4n + 2):first-child {
  margin-left: 250px; /* two-item indentation */
}
li:nth-last-child(4n + 1):first-child {
  margin-left: 375px; /* three-item indentation */
}
li:nth-last-child(4n):first-child {
  /* no indentation */
}

要理解这一点,让我们使用OP的例子：

说有6个项目.我们需要对第一个项目应用两项缩进.

这个选择器将是：

li:nth-last-child(4n + 2):first-child {
  margin-left: 250px; /* 250 = 2 * 120 (item width) + 2 * 5px gap */
}

有趣的是：nth-??last-child(4n 2)：first-child表示：

“选择第一个孩子,如果它也是最后一个孩子的4n 2孩子.”

Codepen demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!