我想知道如何使用flex-wrap(或任何其他想法,包括flexbox)在每一行(包括最后一行)上保留(大约)相同数量的元素>).例如,我有一个包含6个元素的flexbox。当它中断时,我希望第一行有3个元素,第二行有3个元素(或者两个元素的总宽度大致相同)。(我不想调整child的大小,或者破坏flexbox的功能。)现在我只能在第一行获取5个元素,在最后一行获取一个元素。ul{display:flex;justify-content:space-between;flex-wrap:wrap;}这是一个jsfiddle:https://jsfiddle.net/yfj2g7wx/我认
我有一个动态数量的ul.column,其中一些有disabled类。例如:我不知道我可以拥有多少,但我想将border-right应用到最后一个.column而不会还有.disabled类。我试过类似的方法:ul:not(.disabled):last-child{border-right:1pxsolidblack}和ul:last-child:not(.disabled){border-right:1pxsolidblack}但样式始终应用于最后一个元素,无论:not(.disabled)选择器如何。有没有另一种方法来设置最后一个没有.disabled类的.column的样式?我可
我有一个动态数量的ul.column,其中一些有disabled类。例如:我不知道我可以拥有多少,但我想将border-right应用到最后一个.column而不会还有.disabled类。我试过类似的方法:ul:not(.disabled):last-child{border-right:1pxsolidblack}和ul:last-child:not(.disabled){border-right:1pxsolidblack}但样式始终应用于最后一个元素,无论:not(.disabled)选择器如何。有没有另一种方法来设置最后一个没有.disabled类的.column的样式?我可
这个问题在这里已经有了答案:Whatarethedifferencesbetweenflex-basisandwidth?(6个答案)关闭3年前。我需要并排显示多个框。每个盒子都有数量可变的子项。父项应根据子项占用的空间进行扩展。元素具有固定宽度很重要。我正在使用flexbox进行布局。它应该看起来像这样:我写了一个Plunkr来说明。问题:当子项占用更多空间时,Chrome不会展开父项。子项显示在父项的边界之外并出现在相邻的父项中,导致出现这种情况:具有讽刺意味的是,如果您在IE11或Edge中打开Plunkr,它工作正常。我做错了什么?这是一个代码片段:body{display:f
这个问题在这里已经有了答案:Whatarethedifferencesbetweenflex-basisandwidth?(6个答案)关闭3年前。我需要并排显示多个框。每个盒子都有数量可变的子项。父项应根据子项占用的空间进行扩展。元素具有固定宽度很重要。我正在使用flexbox进行布局。它应该看起来像这样:我写了一个Plunkr来说明。问题:当子项占用更多空间时,Chrome不会展开父项。子项显示在父项的边界之外并出现在相邻的父项中,导致出现这种情况:具有讽刺意味的是,如果您在IE11或Edge中打开Plunkr,它工作正常。我做错了什么?这是一个代码片段:body{display:f
我正在使用flexbox将我的4个元素对齐成一行。然后我想将其分解为移动设备:我已经成功地重新排序了这里的元素:.flexcontainer{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-align-items:flex-start;align-items:flex-start;width:90%;margin:0auto;background:red;}.flexcontainer>div{height:100px;width:25%;background
我正在使用flexbox将我的4个元素对齐成一行。然后我想将其分解为移动设备:我已经成功地重新排序了这里的元素:.flexcontainer{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-align-items:flex-start;align-items:flex-start;width:90%;margin:0auto;background:red;}.flexcontainer>div{height:100px;width:25%;background
这个问题在这里已经有了答案:Whatarethedifferencesbetweenflex-basisandwidth?(6个答案)关闭5年前。我是第一次使用display:flex。您可以在这里找到代码笔:https://codepen.io/chrispillen/pen/GEYpRg.node:not(.branch){width:auto;height:100px;background:red;margin-bottom:1px;}.node.branch,.node.branch.body{width:auto;overflow:hidden;}.node.branch.l
这个问题在这里已经有了答案:Whatarethedifferencesbetweenflex-basisandwidth?(6个答案)关闭5年前。我是第一次使用display:flex。您可以在这里找到代码笔:https://codepen.io/chrispillen/pen/GEYpRg.node:not(.branch){width:auto;height:100px;background:red;margin-bottom:1px;}.node.branch,.node.branch.body{width:auto;overflow:hidden;}.node.branch.l
我有一个带有CSS的div:div.c{font-size:18px;color:#888;max-width:300px;display:inline-block;overflow:hidden;line-height:20px;text-overflow:ellipsis;word-break:break-all;}这个div中的内容是“Abcdefabcdefabcdefabcdefabcdefaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa”//例如,仅在div中显示长度。但是如果使用上面的CSS,div内容将被破坏并且没有三个点//aso