部分图像的 CSS 列切割答案

【问题标题】：CSS columns cuts of part of image部分图像的 CSS 列切割
【发布时间】：2019-10-21 10:07:44
【问题描述】：

https://exchagerates.herokuapp.com/

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

有人可以帮忙吗？

【问题讨论】：

标签： css image multiple-columns page-break-inside

【解决方案1】：

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

-webkit-column-break-inside: avoid;

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

【讨论】：

【解决方案2】：

在所有 flex 项目上使用 align-items: center; 或 align-items: flex-end;

或

改变结构Flexbox

【讨论】：

【解决方案3】：

对于您决定创建 CSS 列布局的容器。这对为孩子们生成身高没有太大影响。恰恰相反。参考 Bootstrap card-deck layout，您需要在容器上添加以下 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;

【讨论】：