Flexbox
Динамічний макет кладки неможливий за допомогою флексбоксу, принаймні, не чисто та ефективно.
Flexbox - це одновимірна система компонування. Це означає, що він може вирівняти елементи по горизонтальній АБО вертикальній лінії. Гнучка деталь обмежується її рядком або стовпцем.
Справжня система сітки є двовимірною, тобто вона може вирівнювати елементи по горизонтальній та вертикальній лініях. Елементи вмісту можуть охоплювати рядки та стовпці одночасно, що гнучкі елементи не можуть зробити.
Ось чому флексикс має обмежену потужність для побудови сіток. Це також причина, чому W3C розробив іншу технологію CSS3, Grid Layout .
row wrap
У гнучкому контейнері з flex-flow: row wrapгнучкими предметами слід загорнутись у нові ряди .
Це означає, що гнучкий елемент не може обгортатися під іншим елементом у тому ж рядку .
Зверніть увагу вище, як div # 3 обгортає нижче div # 1 , створюючи новий рядок. Він не може загорнутись під div # 2 .
Як результат, коли елементи не найвищі в ряді, залишається пробіл, створюючи непривабливі прогалини.
column wrap
Якщо перейти на flex-flow: column wrap, сітчастий макет є більш досяжним. Однак контейнер у напрямку стовпця має чотири потенційні проблеми безпосередньо біля кажана:
- Елементи гнучкості течуть вертикально, а не горизонтально (як вам потрібно в цьому випадку).
- Контейнер розширюється горизонтально, а не вертикально (як макет Pinterest).
- Він вимагає, щоб контейнер мав фіксовану висоту, тому елементи знають, куди його загорнути.
- Станом на це написання, він має дефіцит у всіх основних веб-переглядачах, де контейнер не розширюється для розміщення додаткових стовпців .
Як результат, контейнер у напрямку стовпця є не варіантом у цьому випадку та у багатьох інших випадках.
CSS Grid з не визначеними розмірами елемента
Макет сітки був би ідеальним рішенням вашої проблеми, якби різні висоти елементів вмісту могли бути заздалегідь визначені . Всі інші вимоги повністю входять до складу мережі Grid.
Ширина та висота елементів сітки повинні бути відомі, щоб закрити прогалини з навколишніми елементами.
Тож Grid, який є найкращим CSS, який можна запропонувати для побудови горизонтально протікаючої кладки, в цьому випадку не вистачає.
Насправді, поки не з'явиться технологія CSS з можливістю автоматично закривати прогалини, CSS взагалі не має рішення. Щось подібне, ймовірно, вимагатиме поповнення документа, тому я не впевнений, наскільки це було б корисним чи ефективним.
Вам знадобиться сценарій.
Рішення JavaScript, як правило, використовують абсолютне позиціонування, яке вилучає елементи вмісту з документообігу, щоб переупорядкувати їх без пропусків. Ось два приклади:
CSS Grid із визначеними розмірами елемента
Для макетів, де відомі ширина та висота елементів вмісту, ось ось кладка кладки в горизонтальному форматі у чистому CSS:
grid-container {
display: grid; /* 1 */
grid-auto-rows: 50px; /* 2 */
grid-gap: 10px; /* 3 */
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* 4 */
}
[short] {
grid-row: span 1; /* 5 */
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
grid-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
font-weight: bold;
color: white;
}
<grid-container>
<grid-item short>01</grid-item>
<grid-item short>02</grid-item>
<grid-item tall>03</grid-item>
<grid-item tall>04</grid-item>
<grid-item short>05</grid-item>
<grid-item taller>06</grid-item>
<grid-item short>07</grid-item>
<grid-item tallest>08</grid-item>
<grid-item tall>09</grid-item>
<grid-item short>10</grid-item>
<grid-item tallest>etc.</grid-item>
<grid-item tall></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
</grid-container>
Як це працює
- Встановіть контейнер для сітки на рівні блоку. (
inline-gridбув би інший варіант)
grid-auto-rowsВластивість задає висоту автоматично генеруються рядків. У цій сітці кожен ряд висотою 50 пікселів.grid-gapВластивість є узагальнюючим для grid-column-gapі grid-row-gap. Це правило встановлює розрив у 10 пікселів між елементами сітки. (Це не стосується області між елементами та контейнером.)grid-template-columnsВластивість встановлює ширину явно певних стовпців.
repeatПозначення визначає зразок повторюваних стовпців (або рядків).
auto-fillФункція повідомляє сітку вибудовуватися стільки стовпців (або рядків) , як це можливо без переповнення контейнера. (Це може створити подібну поведінку до розкладки макета flex-wrap: wrap.)
minmax()Функція встановлює мінімальний і максимальний діапазон розмірів для кожного стовпця (або рядка). У наведеному вище коді ширина кожного стовпця становитиме мінімум 30% контейнера і максимум, скільки вільного місця є.
frБлок являє собою частку вільного простору в контейнері сітки. Це можна порівняти з властивістю flexbox flex-grow.
З grid-rowі spanми говоримо елементи сітки , скільки рядків вони повинні поширюються поперек.
Підтримка браузера для CSS Grid
- Chrome - повна підтримка станом на 8 березня 2017 року (версія 57)
- Firefox - повна підтримка станом на 6 березня 2017 року (версія 52)
- Safari - повна підтримка станом на 26 березня 2017 року (версія 10.1)
- Edge - повна підтримка станом на 16 жовтня 2017 року (версія 16)
- IE11 - немає підтримки для поточних специфікацій; підтримує застарілу версію
Ось повне зображення: http://caniuse.com/#search=grid
Класна функція накладання сітки у Firefox
У інструментах для розробки Firefox, коли ви оглядаєте контейнер з сіткою, в CSS-декларації присутній крихітний значок сітки. Після натискання відображається контур вашої сітки на сторінці.
Детальніше тут: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
