css - 部分图像的 CSS 列切割

Question

https://exchagerates.herokuapp.com/

如果您在 Chrome 中查看关岛国旗，它从顶部被切断。它分布在第一列和第二列之间。这是我不想要的。如何让所有列的顶部对齐？我试过使用page-break-inside: avoid，但这似乎没有帮助。

有人可以帮忙吗？

Answer 1

你很接近，只需添加一个 webkit 前缀：

-webkit-column-break-inside: avoid;

至少我的 Chrome 需要，Windows 版本 77.0.3865.120（官方构建）（64 位）。

Answer 2

在所有物品上使用align-items: center;或align-items: flex-end;flex

或者

改变Flexbox的结构

Answer 3

对于您决定创建 CSS 列布局的容器。这对为孩子们生成身高没有太大影响。恰恰相反。参考 Bootstrap卡片组布局，您需要在容器上使用以下 CSS：

/*columns: 300px 4;*/
/* margin: 20vh 5% 5%; */
margin-top: calc(50px + 4%); // 50px height of the input + 2% top margin + 2% bottom margin
margin-left: 5%;
margin-right: 5%;
display: flex;
flex-flow: row wrap;

在这种情况下，孩子将作为弹性项目对齐。对于列布局，您将需要该flex-basis属性。

display: flex;
flex: 1 0 30%; // flex-basis 30% for 3 colums per row (33.33% - 15px - 15px)
flex-direction: column;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;