Властивість display визначає тип відображення елемента, як він відображатиметься на веб-сторінці: як блок, малий елемент або якимось іншим способом.
Значення display: inline використовується для елементів, які відображаються у групі слів поряд з іншими елементаминаприклад у параграфі. Розміри малих елементів визначаються вмістом, тому встановити їх через CSS-властивості не вдасться.
Група властивостей, що з'явилася в CSS 2.1 display: table-* дозволяє створити таблицю з довільних елементів, що мають відповідну структуру. Відповідно до специфікації, достатньо лише одного оголошення на кшталт display: table або display: table-cell — елементи, що бракують, повинні автоматично добудовуватися браузером.
display: none; Якщо властивість display набуває значення none на елементі, то елемент видаляється з дерева доступності. Це призводить до того, що елемент і всі його дочірні елементи не сприйматимуться технологіями читання екрана.
При створенні макета у Webflow ви можете використовувати display: block для поділу сторінки на стовпці або керування позиціонуванням елемента . Ви будете використовувати цю категорію для заголовків, абзаців та іншого контенту, який має відображатись на видному місці на сторінці.
Отже, значення block дозволяє визначити блоковий елемент. Такий елемент візуально відокремлюється від сусідніх елементів переносом рядка, як, наприклад, елемент параграфа p або елемент div, які за замовчуванням є блоковими і візуалізації веб-сторінки візуально переносяться на новий рядок.
Щоб перетворити елемент на flex-контейнер, потрібно встановити властивість display: flex або display: inline-flex. Різниця між flex та inline-flex у тому, що у першому випадку контейнер займатиме всю ширину екрану (як блоковий елемент), а в другому – лише простір, що займає його вмістом..
Властивість display: inline-flex зробить елемент контейнером flexbox, а контейнер буде вбудованим . Вони можуть змінювати розмір. Елементи всередині контейнера також вбудовані. Властивість display: flex зробить елементи контейнера вбудованими, але контейнер заблокує весь рядок.