gpt4 book ai didi

html - 如何使用 'display:flex' 将列表项包装在容器中?

转载 作者:太空宇宙 更新时间:2023-11-04 11:47:13 25 4
gpt4 key购买 nike

我正在使用灵活的框模块 ('display:flex'),无法让我的列表项换行。我有一些非常简单的 HTML 和 CSS,但由于某些原因,列表项的行为方式与我希望的不同。

这是我在 Codepen 上的工作:

<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>

.flex-container {
padding: 0;
margin: 0;
list-style: none;

-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;

-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-items: stretch;
align-items: stretch;
}

.flex-item:nth-of-type(1) { flex-grow: 1; }
.flex-item:nth-of-type(2) { flex-grow: 1; }
.flex-item:nth-of-type(3) { flex-grow: 2; }
.flex-item:nth-of-type(4) { flex-grow: 1; }
.flex-item:nth-of-type(5) { flex-grow: 1; }

.flex-item {
background: tomato;
border: 3px solid rgba(0,0,0,.2);
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>

具体来说,目标是有两行内容。顶层将包含元素“1”、“2”和“3”,底层将包含元素“4”和“5”。有任何想法吗?

最佳答案

您可以强制换行,在正确的位置插入足够宽的伪元素:

.flex-container::after {
content: '';
width: 100%; /* Force a line break */
}
.flex-item:nth-of-type(n + 3) {
order: 1; /* Place them after the ::after */
}

.flex-container {
padding: 0;
margin: 0;
list-style: none;

-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;

-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-items: stretch;
align-items: stretch;
}

.flex-item {
background: tomato;
border: 3px solid rgba(0,0,0,.2);
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
flex: 1;
}
.flex-item:nth-of-type(3) {
flex: 2;
}
.flex-item:nth-of-type(n + 3) {
order: 1
}
.flex-container::after {
content: '';
width: 100%;
}
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>

关于html - 如何使用 'display:flex' 将列表项包装在容器中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30900501/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com