检查元素计数是否为奇数，否则仅使用 CSS

Question

我想按项目数量动态设置布局，使用 display:flex，如下布局：

// If number of child element is odd, first item width is 100% else 50%
+---------+
|    1    |
+---------+
+---+ +---+
| 2 | | 3 |
+---+ +---+
+---+ +---+
| 4 | | 5 |
+---+ +---+
...
// If number of child element is even, all items width is 50%
+---+ +---+
| 1 | | 2 |
+---+ +---+
+---+ +---+
| 3 | | 4 |
+---+ +---+
...

项目示例如下：

<!-- Count : 1 -->
<div id="box">
    <div class="item">1</div>
</div>

<!-- Count : 2 -->
<div id="box">
    <div class="item">1</div>
    <div class="item">2</div>
</div>

<!-- Count : 3 -->
<div id="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

<!-- Count : 4 -->
<div id="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
<!-- ... -->

所以，我想像下面的代码一样设置布局，但我只想使用 CSS 来完成。

function setLayout() {
    if (items.length % 2 === 0) {
        // Even
        // ... All items width set to 50%
    }
    else {
        // Odd
        // ... First item width set to 100%
        // ... All items width set to 50%, except first item
    }
}

我参考了文档，但我不知道如何“计数”项目并应用 CSS 作为计数条件（如果 odd/even）。 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classes

那么，我怎样才能得到项目的数量是奇数还是偶数，并应用不同的设置，仅使用 CSS？

Answer 1

您可以使用 css 执行此操作。但在此之前请记住一个 id 只能应用于一个元素（id 不能重复）。你可以做的是将 class="box" 添加到 div 并使用 :nth-child() 如下代码

.box .item:nth-child(1){
 // your code
}


.box .item:nth-child(odd){
 // your code for elements 1,3,etc
}

.box .item:nth-child(even){
 // your code for elements 2,4,etc
}

编辑：

您可以创建 2 个类调用 count-odd 和 count-even 添加您想要的样式，并使用下面的 js 代码动态添加类，如下所示片段

function setCountClass() {
  var boxes = document.querySelectorAll(".box"); 
  boxes.forEach((e, i) => {
    if (e.children.length % 2 === 0) {
      e.classList.add("count-even");
    } else {
      e.classList.add("count-odd");
    }
  });
}

setCountClass();

.box{
  margin: 2rem;
  padding: 1rem;
  display: flex;
  gap: 1rem;
}

.count-even{
  background: red;
  color: white;
}

.count-odd{
  background: blue; 
  color: white;
}

.count-odd div:first-child{
  margin: 0.5rem;
  padding: 0.5rem;
  border: 1px solid;
}

<!-- Count : 1 -->
<div class="box">
    <div class="item">1</div>
</div>

<!-- Count : 2 -->
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
</div>

<!-- Count : 3 -->
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

<!-- Count : 4 -->
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
<!-- ... -->

Answer 2

你只需要检查整个元素的个数是奇数还是偶数。然后，您可以使用 Javascript 将 class 分配给包装盒元素。两个工作示例。一个是奇数，一个是偶数。

奇数元素

const elements = 5;
const box = document.querySelector('.box');
let className = (elements % 2) ? 'odd' : 'even';

for (let i = 0; i < elements; i++) {  
  let item = document.createElement('div')
  item.setAttribute('class','item');
  item.innerHTML = (i + 1);
  box.append(item);  
}
console.log(className)
box.classList.add(className);

.box {
  display: flex;  
  flex-wrap: wrap;
  background: #e2eaf4;
  padding: 10px; 
}

.item {
  flex: 1 1 40%;  
  font-family: "Open Sans", Arial;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  background: #3794fe;
  border-radius: 6px;
  padding: 20px;
  margin: 12px;  
}


.odd .item:first-child {
  width: 100%;
  flex: 1 1 100%;
}

<div class="box"></div>

偶数元素

const elements = 4;
const box = document.querySelector('.box');
let className = (elements % 2) ? 'odd' : 'even';

for (let i = 0; i < elements; i++) {  
  let item = document.createElement('div')
  item.setAttribute('class','item');
  item.innerHTML = (i + 1);
  box.append(item);  
}
console.log(className)
box.classList.add(className);

.box {
  display: flex;  
  flex-wrap: wrap;
  background: #e2eaf4;
  padding: 10px; 
}

.item {
  flex: 1 1 40%;  
  font-family: "Open Sans", Arial;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  background: #3794fe;
  border-radius: 6px;
  padding: 20px;
  margin: 12px;  
}


.odd .item:first-child {
  width: 100%;
  flex: 1 1 100%;
}

<div class="box"></div>

Answer 3

您可以像下面这样操作：

#box {
  display: flex;
  flex-wrap:wrap;
  gap: 10px;
  border:5px solid blue;
  margin:10px;
}

#box > div {
  flex: 40%;
  height: 40px;
  background: red;
}

/* select the first element of it's an "odd" child counting from the end */
#box > div:first-child:nth-last-child(odd) {
  flex-basis:100%;
}

<!-- Count : 1 -->
<div id="box">
  <div class="item">1</div>
</div>

<!-- Count : 2 -->
<div id="box">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

<!-- Count : 3 -->
<div id="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<!-- Count : 4 -->
<div id="box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<!-- ... -->

<!-- Count : 5 -->
<div id="box">
  <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>
<!-- ... -->

检查元素计数是否为奇数，否则仅使用 CSS

Check if element count is odd, or else using CSS only

css

flexbox