CSS flex 最后一个不完整的行项目占完整行项目的宽度
CSS flex last incomplete row items take the width of complete row items
我正在创建一个 flexbox;一个容器有一个 max-width
,比如说 max-width = 500px
,每个子项都有 min-width: 130px
和 flex-grow: 1
来填充整行 space.
这是 fiddle:https://jsfiddle.net/7wroxkhj/6/
我想要实现的是,最后一行的项目与前面的项目具有相同的宽度。即:项目 #7 和项目 #8 具有相同宽度的项目从 1 到 6。
我怎样才能做到这一点?
更新:
欢迎JS解决方案!
为伪元素赋予顶部与元素相同的属性,但高度非常低。
但是如果需要2个以上的伪元素,就需要另一种技巧了
.parent {
background: red;
max-width: 500px;
height: 400px;
display: flex;
flex-wrap: wrap;
}
.parent::after {
content: '';
flex: 130px 1;
margin: 10px;
background-color: yellow;
height: 10px;
}
.child {
background: blue;
margin: 10px;
flex: 130px 1;
color: #FFFFFF;
text-align: center;
line-height: 50px;
font-size: 60px;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
请注意,伪造的实际高度为 0px,背景黄色不会出现...
这些仅用于演示目的
编辑:FF 处理最小高度来自 min-height 的情况和来自 flex-basis 的情况不同。但是 Chrome 处理这些是一样的。所以我以前的解决方案只适用于 Chrome。 (不确定哪个是 "standard".
我更改了 .child 的 min-height 并将其移动到 flex-basis,现在它在 Chrome 和 FF 中都可以正常工作。
更新
好的,我终于明白为什么 OP 对一切的看法都与我如此不同。我使用的是 Chrome 而 OP 使用的是 Firefox。以下是最新的demo,应该兼容Chrome和Firefox
- 主要变化包括将整个布局包装在一个 flex-column 容器中。
- 删除了
margins: 10px;
,因为带有 box-sizing
的 flexbox 没有按预期处理边距或边框。
- 使用了大量的最小和最大高度和宽度属性。
- 在列和行方向上使用了
justify-content: space-between
和 align-items: space-between
,形成了一个紧凑而灵活的网格。
https://jsfiddle.net/zer00ne/fkczpggy/
.case {
background: red;
display: flex;
flex-flow: column wrap;
justify-content: space-between;
align-items: space-around;
margin: auto 0;
max-width: 500px;
overflow-y: auto;
}
.parent {
background: red;
height: 99vh;
min-height: 100%;
max-width: 500px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: space-between;
flex: 0 1 auto;
overflow-y: auto;
}
.child {
background: blue;
min-width: 130px;
min-height: 130px;
border: 1% solid transparent;
color: #FFFFFF;
height: auto;
text-align: center;
font-size: 60px;
flex: 1 0 10%;
margin: 1%;
}
.child:last-of-type {
visibility: hidden;
}
<section class="case">
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
</section>
旧
这是一个懒惰但有效的方法:
已更新以反映 divs
的动态变量数
使用nth-of-type(n+9)
或者这样会更好:
last-of-type
添加第9个div
然后将这一行添加到您的 CSS:
.child:nth-of-type(n+9) {
visibility: hidden;
}
或
.child:last-of-type {
visibility: hidden;
}
https://jsfiddle.net/zer00ne/4fp88arh/
.parent {
background: red;
max-width: 500px;
height: 400px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
/*.parent:after {
content: '';
flex-grow: 1000000000;
}*/
.child {
background: blue;
min-width: 130px;
margin: 10px;
flex-grow: 1;
color: #FFFFFF;
text-align: center;
line-height: 50px;
font-size: 60px;
}
/*.child:nth-of-type(n+9) {
visibility: hidden;
}*/
.child:last-of-type {
visibility: hidden;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child"></div>
</div>
您可能需要考虑列表末尾的不可见弹性项目。
HTML
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child hidden">9</div> /* new */
<div class="child hidden">10</div> /* new */
</div>
CSS
.hidden {
visibility: hidden;
height: 0;
font-size: 0;
margin: 0 10px;
}
我正在创建一个 flexbox;一个容器有一个 max-width
,比如说 max-width = 500px
,每个子项都有 min-width: 130px
和 flex-grow: 1
来填充整行 space.
这是 fiddle:https://jsfiddle.net/7wroxkhj/6/
我想要实现的是,最后一行的项目与前面的项目具有相同的宽度。即:项目 #7 和项目 #8 具有相同宽度的项目从 1 到 6。
我怎样才能做到这一点?
更新:
欢迎JS解决方案!
为伪元素赋予顶部与元素相同的属性,但高度非常低。
但是如果需要2个以上的伪元素,就需要另一种技巧了
.parent {
background: red;
max-width: 500px;
height: 400px;
display: flex;
flex-wrap: wrap;
}
.parent::after {
content: '';
flex: 130px 1;
margin: 10px;
background-color: yellow;
height: 10px;
}
.child {
background: blue;
margin: 10px;
flex: 130px 1;
color: #FFFFFF;
text-align: center;
line-height: 50px;
font-size: 60px;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
请注意,伪造的实际高度为 0px,背景黄色不会出现...
这些仅用于演示目的
编辑:FF 处理最小高度来自 min-height 的情况和来自 flex-basis 的情况不同。但是 Chrome 处理这些是一样的。所以我以前的解决方案只适用于 Chrome。 (不确定哪个是 "standard".
我更改了 .child 的 min-height 并将其移动到 flex-basis,现在它在 Chrome 和 FF 中都可以正常工作。
更新
好的,我终于明白为什么 OP 对一切的看法都与我如此不同。我使用的是 Chrome 而 OP 使用的是 Firefox。以下是最新的demo,应该兼容Chrome和Firefox
- 主要变化包括将整个布局包装在一个 flex-column 容器中。
- 删除了
margins: 10px;
,因为带有box-sizing
的 flexbox 没有按预期处理边距或边框。 - 使用了大量的最小和最大高度和宽度属性。
- 在列和行方向上使用了
justify-content: space-between
和align-items: space-between
,形成了一个紧凑而灵活的网格。
https://jsfiddle.net/zer00ne/fkczpggy/
.case {
background: red;
display: flex;
flex-flow: column wrap;
justify-content: space-between;
align-items: space-around;
margin: auto 0;
max-width: 500px;
overflow-y: auto;
}
.parent {
background: red;
height: 99vh;
min-height: 100%;
max-width: 500px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: space-between;
flex: 0 1 auto;
overflow-y: auto;
}
.child {
background: blue;
min-width: 130px;
min-height: 130px;
border: 1% solid transparent;
color: #FFFFFF;
height: auto;
text-align: center;
font-size: 60px;
flex: 1 0 10%;
margin: 1%;
}
.child:last-of-type {
visibility: hidden;
}
<section class="case">
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
</section>
旧
这是一个懒惰但有效的方法:
已更新以反映 divs
的动态变量数使用nth-of-type(n+9)
或者这样会更好:
last-of-type
添加第9个div
然后将这一行添加到您的 CSS:
.child:nth-of-type(n+9) { visibility: hidden; }
或
.child:last-of-type { visibility: hidden; }
https://jsfiddle.net/zer00ne/4fp88arh/
.parent {
background: red;
max-width: 500px;
height: 400px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
/*.parent:after {
content: '';
flex-grow: 1000000000;
}*/
.child {
background: blue;
min-width: 130px;
margin: 10px;
flex-grow: 1;
color: #FFFFFF;
text-align: center;
line-height: 50px;
font-size: 60px;
}
/*.child:nth-of-type(n+9) {
visibility: hidden;
}*/
.child:last-of-type {
visibility: hidden;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child"></div>
</div>
您可能需要考虑列表末尾的不可见弹性项目。
HTML
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child hidden">9</div> /* new */
<div class="child hidden">10</div> /* new */
</div>
CSS
.hidden {
visibility: hidden;
height: 0;
font-size: 0;
margin: 0 10px;
}