相关疑难解决方法(0)

定位最后一行的弹性项目

我的问题是我希望flexbox具有可变范围宽度,并且一切正常,但不是最后一行.我希望所有孩子都有相同的维度,即使行没有孩子(最后一行).

#products-list {
    position:relative;
    display: flex;
    flex-flow: row wrap;
    width:100%;
}

#products-list .product {
    min-width:150px;
    max-width:250px;
    margin:10px 10px 20px 10px;
    flex:1;
}
Run Code Online (Sandbox Code Playgroud)

在JSFiddle示例中,我创建了一个动态情境.

我的flex div可以缩小到150px并且长到250px,但所有都必须具有相同的大小(显然我想要一个CSS解决方案,JS我知道的方式).

html css css3 flexbox

36
推荐指数
2
解决办法
1万
查看次数

使用Grid很难或不可能实现Flexbox涵盖的哪些领域?

突出强调了Flexbox用于1-D,而Grid用于2-D,但是我还没有找到清楚的解释,为什么不能将Grid用于1-D并替代Flexbox。在我来到最接近的就是

但是您也可能会争辩说,像这样的纯一维布局在Flexbox中更强大,因为Flexbox允许我们更轻松地移动这些元素(例如,将它们全部移动到一侧或另一侧,更改其顺序,将它们均匀地隔开等)。

我将Grid和Flexbox用于基本布局:框在页面上的一般放置以及一些动态的(通常是堆叠的)。美观的(烤面包机,模式,...)通过框架进行管理。我还没有发现Grid无法立即替换Flexbox的情况(即没有高级CSS 技巧或很多代码)。

以上面的引用为例,提到的所有“动作”都可以在Grid中直接使用,通常具有与Flexbox相同的语义。

Flexbox涵盖哪些难以或无法通过Grid管理的基本领域?

编辑:浏览器支持并不重要(我只使用常绿的浏览器,如果需要可以切换)

css flexbox css-grid

4
推荐指数
2
解决办法
217
查看次数

标签 统计

css ×2

flexbox ×2

css-grid ×1

css3 ×1

html ×1