相关疑难解决方法(0)

有关于此的问题和文章,但据我所知,没有任何结论.我能找到的最好的总结是

flex-basis允许您在计算任何其他内容之前指定元素的初始/起始大小.它可以是百分比或绝对值.

...这本身并没有说明基于柔性基组的元素的行为.根据我目前对flexbox的了解,我不明白为什么它也无法描述宽度.

我想知道flex-basis与实际宽度的不同之处:

• 如果我用flex-basis替换宽度(反之亦然),那么会在视觉上改变什么？
• 如果我将两者设置为不同的值会发生什么？如果它们具有相同的值会发生什么？
• 是否存在一些特殊情况,使用宽度或柔性基础与使用另一个有明显区别？
• 如何宽度和柔性基础上与其他Flexbox的风格,如配合使用时,不同的柔性包装,柔性成长和弹性收缩？
• 还有其他重大差异吗？

编辑/澄清:这个问题已经以不同的格式询问了什么是flex-basis属性集？但我觉得更直接的比较或总结柔性基础和宽度(或高度)的差异将是不错的.

实际上,这是Pinterest布局.但是,在线发现的解决方案包含在列中,这意味着容器无意中水平生长.这不是 Pinterest布局,并且它不适用于动态加载的内容.

我想要做的是有一堆固定宽度和不对称高度的图像,水平放置,但当满足固定宽度容器的限制时包裹在一个新行中:

flexbox可以做到这一点,还是我不得不求助于像Masonry这样的JS解决方案？

我有一个flex的问题.

我有一个包装器,可以显示最少1个,最多9个方块.根据网格中的平方数,正方形可以有多种尺寸.除了一个,我已经完成了所有必需的工作,如下图所示:

我的风格是:

.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between;
    width: 300px;
    height: 300px;
    position: relative;
}

加.图像的大小基于它们的总数和它们在列表中的位置.

所以当我从右下方有一个大正方形(占据4个小方块的位置)和5个小方块时,问题出现了.

最重要的是他应该是第一个.

在他旁边(右上角)是第二个,这也是正确的.

第三个位于左下角,它应位于第二行和最右侧.因为这个,所有其他人都处于错误的位置,所以最后一个是溢出的.

我已经尝试了很多值组合justify-content,align-content,align-items和align-self,但没有工作过.

如果没有针对此的灵活解决方案,我将回到大量课程并定位绝对解决方案.但我不喜欢它.这是太多的风格,看起来不太好.

任何建议将不胜感激.