Tag: css grid

只有CSS的砌体布局，但水平排列元素

我需要实现一个相当普通的砌体布局。 但是，由于一些原因，我不想使用JavaScript来做到这一点。 参数： 所有的元素都有相同的宽度 元素的高度不能计算在服务器端（一个图像加上不同数量的文本） 如果必须的话，我可以生活在固定数量的专栏中 有一个简单的解决scheme，可以在现代浏览器中使用column-count属性。 该解决scheme的问题是元素按列sorting： 虽然我需要sorting的元素，至less大约： 我尝试过的方法不起作用： 制作项目display: inline-block ： 浪费垂直空间。 制作项目float: left ： 大声笑，没有。 现在，我可以更改服务器端渲染，并重新排列项数除以列数的项目，但这是复杂的，容易出错（基于浏览器如何决定将项目列表拆分成列），所以我想如果可能的话避免它。 有没有一些新的灵活的魔术，使这成为可能？

中心和底部alignment弹性项目

我有一个flex容器（蓝色方块）具有以下属性： display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; 因此，它的孩子（淡蓝色的方块）按照您在下面看到的方式排列。 但是，我想从正常stream程中添加另一个孩子（绿色方块），并将其定位在父母的相对位置。 要定位，如下所示，我最好写一些像bottom: 20px; 和margin: auto; 。 我试图玩z-index无济于事。 我应该如何处理这个？ 我应该诉诸创造另一个父母元素？