css 订购显示Flex上的两个组合项

bweufnob 于 2023-11-19 发布在其他

关注(0)|答案(2)|浏览(68)

我正尝试在桌面上使用flex制作下一个元素网格：
每个容器中有两个项目，如下所示：

<div class="descriptionElements">
                <div class="itemsContainer">
                    <div class="itemDescription">
                        <div class="descriptionItemSection">
                            <span class="titleItemDescription">item-1</span>
                            <p class="textItemDescription">Description
                            </p>
                        </div>

                    </div>
                    <div class="itemDescription">
                        <div class="descriptionItemSection">
                            <span class="titleItemDescription">item-2</span>
                            <p class="textItemDescription">Description
                            </p>
                        </div>
                    </div>
                </div>
                <div class="itemsContainer">
                    <div class="itemDescription">
                        <div class="descriptionItemSection">
                            <span class="titleItemDescription">item-3</span>
                            <p class="textItemDescription">description
                            </p>
                        </div>
                    </div>
                    <div class="itemDescription">
                        <div class="descriptionItemSection">
                            <span class="titleItemDescription">item-4</span>
                            <p class="textItemDescription">Description
                            </p>
                        </div>
                    </div>
                </div>

字符串
为什么这样做？，是因为在移动的我需要做一个不同的项目顺序在滑块上，类似于这样：
我知道，如果我做一个简单的容器与每个项目，我可以订购像第一个例子，但我不能订购像我想在移动的，或者是？
关于滑块，即时通讯使用光滑滑块

css

来源：https://stackoverflow.com/questions/77450455/order-items-that-are-group-of-two-on-display-flex

2条答案

按热度按时间

daupos2t1#

使用标准的flexbox这是不可能的，但是，你可以用display: contents打开单个的 Package 器div，然后它应该可以工作。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.descriptionElements {
  display: flex;
  width: 450px;
  border: 1px solid grey;
  flex-wrap: wrap;
}

.itemsContainer {
  display: contents;
}

.itemDescription {
  width: 33.333%;
  border: 1px solid red;
}

个字符

赞(0）回复(0）举报 2023-11-19

rkkpypqq2#

如果网格是固定的，你可以用途：nth-child来选择偶数和奇数元素，更多关于这个伪选择器here。

.demo {
  display: flex;
  flex-direction: row;
  list-style: none;
  flex-wrap: wrap;
  width: 210px;
  height: 140px;
  margin: 0;
  padding: 0;
}

.demo li {
  flex: 1 33.3333%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 0 0 2px #000 inset;
}

.demo li:nth-child(even) {
  order: 2;
}
.demo li:nth-child(odd) {
  order: 1;
}

个字符

赞(0）回复(0）举报 2023-11-19

我来回答

css 订购显示Flex上的两个组合项

2条答案

相关问题

热门标签

最新问答