CSS колонки вырезы части изображения - PullRequest
Новая
       10

CSS колонки вырезы части изображения

0 голосов
/ 21 октября 2019

https://exchagerates.herokuapp.com/

Если вы посмотрите на флаг Гуама в Chrome, он обрезается сверху. Он распределяется между первым столбцом и вторым. Что я не хочуКак получить вершины всех столбцов для выравнивания? Я пытался использовать page-break-inside: avoid, но, похоже, это не помогло.

Может кто-нибудь помочь?

Ответы [ 3 ]

0 голосов
/ 21 октября 2019

Используйте align-items: center; или align-items: flex-end; на всех flex элементах

ИЛИ

Измените структуру Flexbox

0 голосов
/ 21 октября 2019

Для контейнера вы решили создать макет столбцов 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;
0 голосов
/ 21 октября 2019

Вы были близки, просто добавьте префикс веб-набора: 

-webkit-column-break-inside: avoid;

Требуется как минимум для моего Chrome, Windows, версия 77.0.3865.120 (официальная сборка) (64-разрядная версия).

...