Интернет развивается, и для дизайнеров макетов появляются новые параметры макета страницы, включая новые свойства CSS, которые помогают в этом.
В этой статье я описал некоторые из них: многоколоночный макет, флексбокс и сетку.
Поддержку браузером новых функций можно проверить на сайте.
Многоколоночный
Используя многоколоночность, вы легко сможете разбить текст на несколько колонок, не используя костыли в виде позиционирования и поплавков.Вы можете указать ширину каждого столбца; их количество будет ограничено только шириной браузера:
Вы можете указать количество столбцов:#mcexample { column-width: 13em; }
#mcexample {
column-count: 3;
}
Изменение стиля столбца:
#mcexample {
columns: auto 13em; /* column-count,
column-width */
column-gap: 1em;
column-rule: 1em solid black; /* width, style, color */
}
Фактически, основная и наиболее ожидаемая функция этого свойства — возможность переносить текст из одного столбца в другой.
Непонятно, почему оно не появилось намного раньше.
Флексбокс
Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в нужном порядке.
Официальная спецификация здесь: Модуль CSS Flexible Box Layout
На tutplus.com Есть простые наглядные примеры использования flexbox. Вы можете размещать дочерние блоки с желаемым выравниванием по горизонтали: 
или вертикально: 
Растянуть на всю ширину: 
И многое другое.
Вызвать flexbox очень просто: <ul>
<li>An item</li>
<li>Another item</li>
<li>The last item</li>
</ul>
ul {
/* Old Syntax */
display: -webkit-box;
/* New Syntax */
display: -webkit-flexbox;
}
Маркировка сетки
Спецификация - CSS-сетка — введено Microsoft в апреле этого года, поэтому разметка все еще работает только в Internet Explorer 10 .Но учитывая фундаментальность проделанной работы, поддержка функционала в других браузерах — вопрос времени.
Макет сетки позволяет размещать контент отдельно от макета, используя строки и столбцы.
Сначала вам нужно объявить сетку: #gridexample {
display: -ms-grid;
-ms-grid-rows: 30px 5em auto;
-ms-grid-columns: auto 70px 2fr 1fr;
}
Объяснение:
- Первая строка – 30 пикселей в высоту.
- Вторая линия – высота 5 см.
- Размер третьей строки будет зависеть от количества контента.
- Размер первого столбца будет зависеть от количества контента.
- Второй столбец – ширина 70 пикселей.
- Третий и четвертый столбцы займут 2/3 и 1/3 ширины соответственно.
#griditem1 {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
Вы можете растянуть элемент на всю ширину, используя диапазон строк сетки :
#griditem1 {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-row-span: 2;
}
Или добавьте выравнивание, используя выравнивание строк по сетке или выравнивание по сетке-столбцу :
#griditem1 {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-align: center;
}
Пример использования многоколоночного, флексбокса и сетки можно увидеть.
Похожие материалы
- Введение в модуль CSS Flexbox , Умар Ханса
- Освойте новые свойства макета CSS Томас Льюис
- Быстрые успехи с помощью гибкой блочной модели Пол Айриш
- Презентация Предварительная версия платформы IE 10 1: будущее адаптивного веб-дизайна Маркус Мильке
-
Простые Методы Саботажа На Производстве
19 Oct, 24 -
На Каких Биржах Вы Работаете?
19 Oct, 24 -
Pdfvue: Аннотации Pdf Из Браузера.
19 Oct, 24
