相关疑难解决方法(0)
每行5个项目,自动调整flexbox中的项目
我现在有这个:
.container {
background: gray;
width: 600px;
display: flex;
flex-flow: row wrap;
position: relative;
}
.item {
background: blue;
width: auto;
height: auto;
margin: 4px;
flex: 1;
flex-basis: 20%;
}<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
<div class="item">G</div>
</div>我想要做的是在flexbox中每行有5个项目.目前它们没有出现,因为它们没有设定的宽度/高度,这引出了我的下一个问题.是否可以自动调整项目大小以使其中每行适合5个项目？
我该怎么做？
谢谢!
9
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
如何使用 Flexbox 使用特定项目开始新行？
这是一个非常简单的练习，但我似乎找不到解决它的巧妙方法（刚开始学习 HTML 和 CSS）。
我需要使用 Flexbox 将红色的第 5 个块（“bloque 5”）置于其他四个块之下。结果应该是：
有人可以帮我解决这个问题吗？这是我到目前为止：
div {
margin: 5px;
border: 1px solid pink;
padding: 5px;
font-family: arial, sans-serif;
font-size: 14px;
}
.contenidor {
width: 760px;
display: flex;
}
div[class*=element] {
width: 100%;
padding: 2px 30px 5px 2px;
}
.element5 {
background-color: red;
}<div class="contenidor">
<div class="element1">bloque 1</div>
<div class="element2">bloque 2</div>
<div class="element3">bloque 3</div>
<div class="element4">bloque 4</div>
<div class="element5">bloque 5</div>
</div>2
推荐指数
推荐指数
1
解决办法
解决办法
577
查看次数
查看次数
是否可以使 CSS 网格中的每隔一行具有不同的列数？
我有一个容器，其中包含未知数量的子级（动态填充）。我在父容器上使用此代码：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 10rem;
}
是否有可能以某种方式使其每隔一个第二行有 4 列而不是 3 列，所以我最终会得到这样的结果：
A B C
A B C D
A B C
A B C D
A B C
A B C D
我尝试过各种方法，但似乎没有任何效果。
编辑：也许我的问题不够清楚 - >我只有一个container随机数量的具有相同类名的 div ，它们是container的直接子代。nth-child(2n) 在这种情况下不起作用，因为我需要每第 4 个元素的列从 3 切换到 4，反之亦然。
2
推荐指数
推荐指数
1
解决办法
解决办法
3329
查看次数
查看次数