Заповнення стовпця - CSS-хитрощі

Зміст

Коли ви додаєте висоту до елемента з декількома стовпцями, ви можете контролювати, як вміст заповнює стовпці. Вміст можна збалансувати або заповнити послідовно.

ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )

Ця властивість доступна лише у Firefox. Firefox автоматично збалансує вміст у макеті з високими стовпцями, обмеженому висотою. Інші браузери завжди заповнюють стовпці послідовно, коли надається обмеження висоти.

Щоб Firefox поводився як інші браузери, тобто послідовно заповнювати стовпці, ви можете встановити column-fill: auto.

Цінності

column-fillприймає значення ключового слова balanceта auto.

balanceзаповнить кожен стовпець приблизно такою ж кількістю вмісту, але не дозволить колонкам зростати вище, ніж height. Можливо, виявиться, що стовпці з’являться коротшими, ніж, heightоскільки браузер розподіляє вміст рівномірно по горизонталі.

autoзаповнюватиме кожен стовпець, доки він не досягне heightзначень, і робити це, поки не закінчиться вміст. Враховуючи вміст, це значення не обов’язково заповнює всі стовпці та заповнить їх рівномірно.

Це як би наливати сік у склянки. Ви можете налити рівну кількість соку в кожну склянку і виявити, що не наповнюєте кожну склянку доверху ( balance). Крім того, ви можете наповнити склянку доверху, поки вона не заповниться, і повторювати це, поки не залишиться соку. Як результат, в решті склянок може бути менше соку або його зовсім немає ( auto).

Див. Приклад заповнення стовпчика Pen (CSS-Tricks) від CSS-Tricks (@ css-tricks) на CodePen.

Підтримка браузера

Значення column-fillключових слів спеціально працюють у Firefox. Вони не працювали в серпні 2014 року, коли цей запис про альманах був написаний спочатку, але працюють при повторному тестуванні в серпні 2015 року (Chrome 44). Під час цього тестування здається, що динамічне змінення значення не спричинить, вам довелося змусити релеаут.

Підтримка браузера для макета з декількома стовпцями загалом: