我想通過專案數動態設定布局，使用 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 應用于計數條件（如果奇數/偶數）。 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classes
那么，我怎樣才能獲得奇數或偶數的專案數，并僅使用 CSS 應用不同的設定？
uj5u.com熱心網友回復：
你可以這樣做：
#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>
<!-- ... -->uj5u.com熱心網友回復：
你可以用css做到這一點。但在此之前，請記住一個id只能應用于一個元素（ID 不能重復）。您可以做的是添加到 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>
<!-- ... -->uj5u.com熱心網友回復：
您只需要檢查整個元素的計數是奇數還是偶數。然后，您可以使用 Javascript 為包裝的框元素分配一個類。兩個作業示例。一個帶有奇數元素，一個帶有偶數元素。
奇數元素
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436799.html