Boxed layout что это

Используем CSS Flexible Box Layout Module. Часть 1: Введение

В данной статье мы рассмотрим использование модели CSS Flex Box, предназначенной для дизайна пользовательского интерфейса в браузере. В этой модели дети контейнера flex (гибкий) могут располагаться в любом направлении, адаптируя свои размеры: расти, чтобы занять неиспользуемое место или сжиматься, чтобы предотвратить переполнение родительского элемента. Можно легко перемещать детей по вертикальной и горизонтальной оси. Возможность вложения контейнеров flex друг в друга (по горизонтальной оси внутри вертикальной и наоборот) позволяет создавать макеты в двух измерениях.

• блочная (block) разметка, спроектированная для документов;
• inline разметка для текста;
• табличная (table) разметка для 2D данных в табличном формате;
• позиционная (positioned) разметка для явного позиционирования элементов без учета других в документе.

Обзор

Разметка flex внешне похожа на блочную разметку. В ней отсутствуют многие сложные свойства, относящиеся к тексту и домументам, которые могут быть использованы в блочной разметке, такие как поплавки (float) и колонки. В то же время эта разметка содержит мощные и простые инструменты для распределения пространства и выравнивания контента способами, которые часто нужны для веб-приложений и сложных страниц.

• может быть размещено в любом направлении (flow direction) (слева направо, справа налево, снизу вверх, сверху вниз).
• может иметь обратный (reversed) или переставленный (rearranged) порядок отображения на уровне стиля (визуальный порядок может не зависеть от источника).
• может быть размещено линейно вдоль единой (основной, main) оси или обернуто (wrapped) во множество строк вокруг вторичной (cross) оси;
• может изменять свои размеры в зависимости от доступного пространства;
• может быть выровнено по отношению к родительскому контейнеру или к соседним;
• может быть динамически сжато и разжато по основной (main) оси, сохраняя размер контейнера по вторичной (cross) оси.

Пример 1

В этом примере каталога каждый элемент имеет название, фотографию, описание и кнопку заказа. Каждый элемент имеет одинаковый размер, фотография над текстом, кнопка покупки выровнена в нижней части элемента вне зависимости от длины описания элемента.

• каталог использует разметку flex для размещения элементов по горизонтали и обеспечивает равную высоту элементов в строке. Каждый элемент — сам по себе контейнер flex, размещающий элементы вертикально.
• Для каждого элемента на странице-источнике контент логически располагается иначе, чем требуется в визуализации: сперва название, далее описание и фото. Это обеспечивает удобный порядок при подготовке контента, а не для браузера. Для более убедительного визуального представления мы используем order (порядок) для перемещения картинки снизу на верх контента и align-self для размещения по центру по горизонтали.
• Использование auto margin (авто поля) до кнопки заказа позволяет ей быть снизу каждого из контейнеров вне зависимости от высоты описания.

       
 
VPS-512
 
Быстрая и надежная VPS по доступной цене.
 ЗАКАЗАТЬ ПРЯМО СЕЙЧАС ЗА 200 РУБЛЕЙ В МЕСЯЦ 
 
VPS-2048
 
Больше ресурсов, чтобы ваши проекты летали.
 ЗАКАЗАТЬ ПРЯМО СЕЙЧАС ЗА 600 РУБЛЕЙ В МЕСЯЦ 
 
   

#deals < display: flex; /* Flex layout so items have equal height Благодаря разметке Flex элементы имеют одинаковую высоту. */ flex-flow: row wrap; /* Размещаем элементы горизонтально и позволяем переносы на несколько строк. */ >.sale-item < display: flex; /* Для каждого элемента используем flex. */ flex-flow: column; /* Размещаем контент элемента вертикально. */ margin-right: 4mm; >.sale-item > img < /*Для каждой картинки внутри класса sale-item */ order: -1; /* Размещаем элемент перед всеми остальными в визуальном отображении. */ align-self: center; /* Горизонтально размещаем картинку по центру. */ >.sale-item > button < /*Для каждой кнопки внутри класса sale-item. */ margin-top: auto; /* Авто отступ сверху прижимает кнопку к низу контейнера. */ background: green; color: white; border: none; padding: 2mm; font-weight: bold; >.sale-item > h1, p

Модуль Flex расширяет определение свойства display в CSS 2.1, добавляя новый блочный (block-level) flex и встроенный (inline-level) inline-flex тип отображения и определяет новый тип форматирования контента со свойствами управления его разметкой. Никакие из этих свойств, определенных в модуле, не применяются к псевдо-элементам ::first-line и ::first-letter.

Если вы нашли ошибку в статье, пожалуйста напишите в ЛС или на почту. Если вы не можете оставлять комментарии на Хабре, напишите в Сообществе InfoboxCloud.

Урок 4. Базовые Layout: Row, Column, Box

В этом уроке используем базовые Layout для расположения элементов на экране.

В одном из прошлых уроков мы уже пытались показать два текста на нашем Composable экране. Если мы делаем это без Layout, то тексты просто накладываются друг на друга

@Composable fun HomeScreen()

Как и в случае с классическим XML экраном, в Compose нам тоже необходимо использовать Layout, чтобы располагать элементы на экране.

Рассмотрим базовые Layout

Column

Column — это аналог вертикального LinearLayout. Он выстроит элементы в вертикальный ряд.

import androidx.compose.foundation.layout.Column @Composable fun HomeScreen() < Column < Text(text = "Title", fontSize = 32.sp) Text(text = "Description", fontSize = 20.sp) >>

Теперь тексты располагаются один над другим

Выравнивание

У Column есть атрибуты для выравнивания: вертикального и горизонтального.

Давайте настроим их так, чтобы тексты были внизу экрана и центрированы по горизонтали

import androidx.compose.foundation.layout.Arrangement import androidx.compose.ui.Alignment @Composable fun HomeScreen() < Column( horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Bottom ) < Text(text = "Title", fontSize = 32.sp) Text(text = "Description", fontSize = 20.sp) >>

Немного не то, что мы ожидали.

Так получилось потому, что Column по умолчанию не занимает весь экран. Давайте добавим ему фоновый цвет, чтобы убедиться в этом:

import androidx.compose.ui.graphics.Color import androidx.compose.foundation.layout.Arrangement import androidx.compose.ui.Alignment @Composable fun HomeScreen() < Column( modifier = Modifier.background(color = Color.LightGray), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Bottom ) < Text(text = "Title", fontSize = 32.sp) Text(text = "Description", fontSize = 20.sp) >>

Видно, что Column занимает места ровно столько, чтобы вместить два текста. Т.е. по умолчанию работает в режиме wrap_content. И внутри себя он применил то выравнивание, которое мы попросили.

Надо сделать его на весь экран. Для этого есть Modifier.fillMaxSize:

import androidx.compose.foundation.layout.fillMaxSize @Composable fun HomeScreen() < Column( modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Bottom ) < Text(text = "Title", fontSize = 32.sp) Text(text = "Description", fontSize = 20.sp) >>

Теперь получилось то, что мы планировали. Тексты располагаются внизу и выровнены по центру по горизонтали.

Если нам надо поменять выравнивание для одного из элементов в Column, то мы можем это сделать через Modifier этого элемента. Это будет иметь приоритет перед общим выравниванием в Column.

В качестве примера включим выравнивание по левому краю для элемента с текстом Description:

import androidx.compose.ui.Alignment.Companion.Start @Composable fun HomeScreen() < Column( modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Bottom ) < Text(text = "Title", fontSize = 32.sp) Text(text = "Description", fontSize = 20.sp, modifier = Modifier.align(Start) ) >>

Description уехал влево, Title остался по центру

Row

Row — это горизонтальный LinearLayout. Соответственно он полностью аналогичен Column, только выстраивает элементы не по вертикали, а по горизонтали

Поместим два текстовых элемента в Row:

import androidx.compose.foundation.layout.Row import androidx.compose.ui.Alignment.Companion.CenterVertically @Composable fun HomeScreen() < Row(verticalAlignment = CenterVertically) < Text(text = "Name", fontSize = 20.sp) Text(text = "Surname", fontSize = 20.sp) >>

Когда мы располагали тексты по вертикали, между ними визуально было свободное место, потому что у шрифтов есть свои отступы сверху и снизу. А при расположении элементов по горизонтали сразу становится видно, что элементы располагаются вплотную друг к другу. Ни Row, ни Column не вставляют никакие отступы между элементами.

Spacer

Добавим отступы между элементами используя элемент Spacer:

import androidx.compose.ui.Modifier import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.width import androidx.compose.ui.unit.dp @Composable fun HomeScreen() < Row(verticalAlignment = CenterVertically) < Text(text = "Name", fontSize = 20.sp) Spacer(modifier = Modifier.width(8.dp)) Text(text = "Surname", fontSize = 20.sp) >>

Добавили 8 dp пустого пространства между текстами

Если нам надо не просто добавить фиксированный отступ, а максимально раскидать элементы, то используем weight:

@Composable fun HomeScreen() < Row(verticalAlignment = CenterVertically) < Text(text = "Name", fontSize = 20.sp) Spacer(modifier = Modifier.weight(1f)) Text(text = "Surname", fontSize = 20.sp) >>

Spacer можно использовать не только в Row, но и в Column

Box

Box — это аналог FrameLayout. Т.е. Layout в котором мы можем накладывать элементы друг на друга.

Например, мы хотим сделать такой текст:

Кажется, что можно просто использовать Column:

@Composable fun HomeScreen() < Column < Text(text = "N", fontSize = 48.sp) Text(text = "ame") >>

Но результат немного не тот, что нужен

Отступы шрифтов не дают нам приблизить два текста вплотную. Чтобы явно увидеть это, можно добавить background к обоим текстам:

@Composable fun HomeScreen() < Column < Text(text = "N", fontSize = 48.sp, modifier = Modifier.background(color = Color.Green) ) Text(text = "ame", modifier = Modifier.background(color = Color.Yellow) ) >>

Чтобы получить желаемый результат, нам надо, чтобы элементы могли быть наложены друг на друга.
Для этого используем Box вместо Column:

import androidx.compose.foundation.layout.Box @Composable fun HomeScreen() < Box < Text(text = "N", fontSize = 48.sp, modifier = Modifier.background(color = Color.Green) ) Text(text = "ame", modifier = Modifier.background(color = Color.Yellow) ) >>

Осталось перетащить вниз и выровнять по центру элемент с текстом «ame». Используем Modifier.align:

import androidx.compose.ui.Alignment.Companion.BottomCenter @Composable fun HomeScreen() < Box < Text(text = "N", fontSize = 48.sp, modifier = Modifier.background(color = Color.Green) ) Text(text = "ame", modifier = Modifier.background(color = Color.Yellow).align(BottomCenter) ) >>

@Composable fun HomeScreen() < Box < Text(text = "N", fontSize = 48.sp) Text(text = "ame", modifier = Modifier.align(BottomCenter) ) >>

Комбинирование

Чтобы создавать сложный экран, мы комбинируем различные Layout друг с другом:

@Composable fun HomeScreen() < Row(verticalAlignment = CenterVertically) < Box < Text("N", fontSize = 48.sp) Text("ame", modifier = Modifier.align(BottomCenter)) >Spacer(modifier = Modifier.width(8.dp)) Column < Text("Title") Text("Description") >> >

В строку мы помещаем Box с двумя текстами и столбец с двумя текстами.

Padding

Чтобы в Layout формировать отступы от границ, используем привычный нам padding. Он добавляется с помощью Modifier.

import androidx.compose.foundation.layout.padding import androidx.compose.ui.unit.dp @Composable fun HomeScreen() < Column( modifier = Modifier.padding(start = 32.dp, top = 16.dp) ) < Text("Title") Text("Description") >>

Kotlin

Мы используем язык Kotlin, чтобы писать свои Composable функции. А это значит, что мы можем использовать стандартные средства языка, чтобы сформировать экран, который нам нужен. Т.е. мы используем оператор If, чтобы решить, надо ли отображать элемент. Или мы используем цикл, чтобы отобразить несколько одинаковых элементов.

Рассмотрим пример Composable функции:

@Composable fun HomeScreen(list: List) < if (list.isEmpty()) < Box(contentAlignment = Center, modifier = Modifier.fillMaxSize()) < Text(text = "Empty screen") >> else < Column < for (s in list) < Text(text = s) >> > >

На вход она получает список строк и проверяет пустой ли он. Если список пустой, то HomeScreen выведет текст Empty screen по центру экрана. Если список содержит какие-то данные, то в Column для каждого элемента списка будет вызвана функция Text. В итоге все данные появятся на экране в виде вертикального списка.

Настоящий список строится по другому, об этом будет отдельный урок.

Проверим, как работает наша функция HomeScreen. Передадим ей простой список строк:

class MainActivity : ComponentActivity() < override fun onCreate(savedInstanceState: Bundle?) < super.onCreate(savedInstanceState) setContent < HomeScreen(listOf("one", "two", "three")) >> >

А если передадим пустой список:

class MainActivity : ComponentActivity() < override fun onCreate(savedInstanceState: Bundle?) < super.onCreate(savedInstanceState) setContent < HomeScreen(emptyList()) >> >

то увидим пустой экран:

Таким образом вместо Visibility у нас теперь используется оператор If

Ресурсы

Я для простоты примеров продолжу использовать числа и строки напрямую в коде. Но в реальном приложении мы обычно используем string и dimen ресурсы. Для этого есть функции stringResource и dimensionResource:

import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.stringResource @Composable fun HomeScreen() < Column( modifier = Modifier.padding(start = dimensionResource(id = R.dimen.large_padding)) ) < Text(text = stringResource(id = R.string.home_screen_title)) Text(text = stringResource(id = R.string.home_screen_description)) >>

Присоединяйтесь к нам в Telegram:

— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.

— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Compose, Kotlin, RxJava, Dagger, Тестирование, Performance

— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня

Комментарии

# Spacer vs Modifier.padding — Татьяна 06.04.2023 13:57

Добрый день! А с точки зрения производительности, что лучше использовать для отступов, spacer или Modifier.padding?

# RE: Spacer vs Modifier.padding — Dmitry Vinogradov 07.04.2023 16:30

Ну если padding уже есть, то наверно увеличить его будет для системы проще, чем добавлять Spacer. Но скорее всего эта разница на уровне погрешности.

Обзор CSS Flexbox layout — технологии для расположения блоков на HTML-странице

Flexbox разработан для оптимизации раскладки элементов, в отличие от float. Он облегчает выравнивание элементов по горизонтали и вертикали, смену направления и порядок отображения элементов, позволяет растягивать блоки на всю высоту родителя или опускать их к нижнему краю.

В статье проведем краткое знакомство с технологией Flexbox. Решив ее использовать, приготовьтесь поменять свои привычные представления о выстраивании элементов в потоке. И дайте себе немного времени на адаптацию к новому подходу.

Что же такое Flexbox

С уверенностью можно сказать, что Flexbox призван помочь нам с некоторыми особо неприятными моментами CSS (например, вертикальное выравнивание). И в решении данного вопроса ему нет равных. Но порой разобраться в принципах работы этой технологии бывает сложно. Особенно если у вас не хватает опыта или вы совсем новичок.

Главная задача Flexbox — сделать слои гибкими, а работу с ними максимально простой. Идея гибкой (flex) разметки — позволить контейнеру менять ширину/высоту (и порядок) своих элементов, чтобы наилучшим образом заполнить доступное пространство (в основном для размещения на всех типах и размерах экранов). Flexbox контейнер расширяет элементы, чтобы заполнить свободное пространство, или сжимает их, чтобы избежать переполнения.

Так как Flexbox — это полноценный модуль, а не отдельное свойство, он содержит целый набор свойств.

Некоторые элементы предназначены для работы с родительским контейнером «flex-контейнер». А другие касаются дочерних элементов (известных, как «flex-элементы»).

Если обычная система компоновки основана на блочных и строковых направлениях, то Flexbox основан на «flex-flow направлениях».

Чтобы начать работать с Flexbox, нам нужно сделать наш контейнер flex-контейнером. Делается это так:

.flex-container

Как можно заметить, элементы выстроились в ряд.

Flex-direction

У flex-контейнера есть две оси: главная ось и перпендикулярная ей.

По умолчанию все предметы располагаются вдоль главной оси: слева направо. Из-за этого блоки выровнялись в линию, когда мы применили свойство display:flex;

Свойство flex-direction позволяет вращать главную ось.

Важно, что свойство flex-direction: column не выравнивает квадраты по оси, перпендикулярной главной. Главная ось сама меняет свое расположение и теперь направлена сверху вниз.

Также существует еще несколько параметров для flex-direction : row-reverse и column-reverse.

.flex-container
.flex-container

Justify-сontent

Свойство justify-content: может принимать пять разных значений:

flex-start; flex-end; center; space-between; space-around.

Работу всех этих свойств можно посмотреть, вписав в пример ниже:

Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси.

Свойство также может принимать пять разных значений:

flex-start; flex-end; center; stretch; baseline;

Как показано в примере, свойства justify-content и align-items довольно легко объединять:

Align-self

Align-self позволяет выравнивать элементы по отдельности.

.flex-container
.box-1 < width:50px; >.box-2 < width:70px; >.box-3 < align-self:center; width:90px; >.box-4

Flex-grow

Свойство определяет возможность элемента увеличиваться в размере при необходимости. Оно принимает безразмерное значение в качестве пропорции, которое определяет, какое количество свободного пространства внутри контейнера должен занимать элемент.

Если у всех элементов свойство flex-grow установлено в 1 , то свободное пространство внутри контейнера будет равномерно распределено между всеми элементами. Если у одного из элементов значение установлено в 2 , то элемент будет занимать в два раза больше пространства, чем остальные (по крайней мере попытается).

.box-1 < flex-grow: 1; >.box-2 < flex-grow: 2; >.box-3 < flex-grow: 3; >.box-4

Указывать отрицательные числа нельзя.

Flex-shrink

Это свойство определяет возможность элемента уменьшаться в размере, при необходимости.

.item < flex-shrink: ; /* по умолчанию 1 */ >

Указывать отрицательные числа нельзя.

Flex

Это сокращение для flex-grow , flex-shrink и flex-basis . Второй и третий параметры (flex-shrink и flex-basis) не обязательны. Значение по умолчанию установлено в 0 1 auto.

Рекомендуется использовать это сокращённое свойство, а не указывать значения индивидуально.

Поддержка браузерами

Chrome - 21+ Safari - 3.1+ Firefox - 22+ Opera - 12.1+ IE - 11 Edge Android - 2.1+ iOS - 3.2+

Заключение

В этой статье я попытался изложить все довольно сжато, но информативно. Flexbox все чаще и чаще начинает встречаться в разработке различных проектов, и у него определенно большое будущее.

Эта технология больше подходит для компонентов приложения и небольших макетов, хотя и весьма сложных, тогда как спецификация CSS Grid Layout предназначена для более масштабных макетов.

Плюсы

1. Не нужны сетки различных HTML-фреймворков
2. Управление блоками абсолютно наглядно и гибко.
3. Полностью решена проблема вертикального позиционирования.
4. Полная поддержка всеми современными браузерами, кроме Internet Explorer.

Минусы

1. Невозможность использования под Internet Explorer 9.
2. Internet Explorer 10+ не понимают некоторые условия Flexbox.

Ка­кой рас­клад?

Эта статья посвящается тем, кто задает правильные вопросы.

В этой статье я постарался рассмотреть все самые распространенные вопросы, сомнения и критику по поводу необходимости создания и внедрения новых механизмов раскладки. Статья дополняет и продолжает содержание моего выступления «CSS3: будущее механизмов раскладки». Если вы его не смотрели, то рекомендую ознакомиться.

Итак, у нас есть три черновика модулей CSS3: Grid Positioning Module, Flexible Box Layout, Template Layout. Каждый ценен своей уникальной идеей. Эти идеи специально спроектированы для решения определенного рода задач по раскладкам. Задач, которые в настоящее время решают не предназначенными для этого методами. Отсюда сложности в разработке и поддержке, ограничения и даже побочные эффекты этих методов.

Долететь до Луны, используя катапульту Скопировать ссылку

Эра CSS-вёрстки, как и эра бурного развития клиентских технологий, длится не так уж и долго. С большой натяжкой — каких-то полтора десятка лет. Сначала все сайты не имели никаких раскладок. Даже графика была редкостью. Затем в веб стали приходить бизнес, индустрия развлечений, СМИ… Требования к представлению информации несоизмеримо выросли.

Сегодня мы находимся в ситуации, когда CSS не отвечает требованиям гибких, технологичных и надежных раскладок. Именно поэтому создаются новые модули, посвященные созданию сеток, шаблонов, гибких блоков. Параллельно с этим разрабатываются такие модули, как Media Queries, Paged Media и другие. Всё это способствует расширению возможностей представления информации в разных условиях и на разных устройствах.

То, что нельзя прочитать в спецификации Скопировать ссылку

Теперь давайте рассмотрим несколько вопросов, возникающих при размышлении о раскладках.

Чем не устраивает float ? Скопировать ссылку

Свойство float способно наделять блоки плавающим поведением. Можно поместить блок слева или справа в контексте других блоков. Недостаточная гибкость float заключается в невозможности поместить блок в контексте других блоков, не прижимая его к краям этого контекста. Такого поведения можно добиться, используя модуль Grid.

Почему бы просто не реализовать display: table во всех браузерах и не забыть про эти многочисленные модули? Скопировать ссылку

Я полностью поддерживаю стремление реализовать display: table во всех браузерах. Но это вовсе не означает, что display: table сможет дать нам гибкий и перспективный механизм создания раскладок. Как можно поменять местами две колонки, не меняя HTML-разметки? Или как, например, возможно поместить блок, который будет одновременно находиться в области этих двух колонок, и при этом их содержимое будет его обтекать? Свойство display: table (как и свойства position и float ) проектировалось совсем не для создания раскладок.

Кто круче: Grid, Flexbox, Template? Скопировать ссылку

Очень хороший вопрос: какой из этих трёх модулей лучше, и кто в итоге должен выиграть? На самом деле, сила этих модулей именно в комбинировании возможностей и в совместном их использовании. Эти модули не стоит воспринимать как конкурентов друг другу. Наоборот, в основе каждого лежит идея позволяющая реализовать уникальные вещи. Так, Grid предназначен для создания сетки и привязки к этой сетке; Flexbox реализует особый механизм поведения блоков; Template создает набор слотов и позволяет, управляя ими, строить раскладки.

Что за разговор, это же всё очень сырое и потому неинтересное! Скопировать ссылку

Это действительно интересный момент. Сырое, согласен. Но почему никого не смущают и, напротив, очень даже интересуют сырые реализации box-shadow и border-radius , а также остальных модных оформительских CSS-свойств. Лично меня очень расстраивает эта возня около вещей, продиктованных модой. Сегодня уголки квадратные, завтра круглые… а послезавтра?

Если серьезно, то на тенюшках, красивых градиентах, кнопках и декоративных вещах нельзя построить большой и серьезный сайт. Основа сайта — раскладка. Именно поэтому мне непонятно, почему жадная до зрелищ толпа разработчиков и дизайнеров давит на производителей браузеров и повышает приоритет и престиж того же border-radius , а потом с салютом и ночными гуляниями отмечает выпуск новой бета-версии браузера с поддержкой этого свойства.

Я считаю, что внедрение, например, модуля Grid или Template может принести гораздо больше пользы, сократить тысячи часов однообразного труда и сэкономить бесчисленное количество денег при разработке раскладок для проектов по всему миру. А это очевидное развитие всей отрасли.

Mozilla сказала своё слово, разработав и внедрив Flexbox. Чей ход теперь? Скопировать ссылку

Справедливости ради нужно сказать, что Flexbox работает не только в Firefox, но и в Safari и в Chrome. А это уже три браузера из большой пятерки. Мой прогноз: в ближайший год IE или Opera введут поддержку этого модуля. Причем я больше склоняюсь в сторону IE. Предпосылки к этому есть — активное обсуждение в рассылке www-style, где Рабочая группа CSS (CSS Working Group) и все желающие обсуждают технические вопросы.

Давайте сделаем тег ? Скопировать ссылку

Это совсем провальное намерение. Идеология открытого веба, к которому мы все так стремимся, гласит: отделяй данные от их представления. Таким образом, внедрять экстра-разметку или какие-либо заведомо стилизованные теги — тупиковый путь.

И главное: — это путь в каменный век табличной вёрстки. Подобные методы не оправдали себя в создании гибких раскладок. Вот простой пример: нужно изменять внешний вид страницы и саму раскладку в зависимости от размеров окна браузера. С HTML-разметкой это невозможно. А сейчас для этого существует CSS-модуль Media Queries.

Какие преимущества мы получаем? Скопировать ссылку

Создавать раскладку при помощи Grid, Flexbox и Template гораздо проще. Следовательно, не нужно оплачивать труд CSS-гуру или самому быть им. Это совсем не означает, что высококвалифицированному специалисту будет нечего делать. Наоборот, он найдет себе применение в решении более интересных задач вёрстки.

Создавать раскладки можно гораздо быстрее, а значит — можно сократить сроки вёрстки.

Раскладка на Grid, Flexbox и Template более функциональная и гибкая. Таким образом, внесение изменений будет обходиться дешевле, проще и быстрее.

Так как раскладкой в CSS будут заведовать определенные специально предназначенные для этого свойства, легко можно будет наладить автоматическую генерацию раскладок. Возможно, именно тогда CSS-фреймворки обретут второе дыхание.

Главный вопрос Скопировать ссылку

Сейчас не нужно выдумывать ничего нового. Нужно сосредоточить свое внимание на этих спецификациях. Осознать, что уже проделана огромная работа по придумыванию и обсуждению этих идей. Также важно, что именно Рабочая группа CSS занимается этими вопросами. Эти идеи родились в их умах. В умах людей, которые сегодня имеют непосредственное отношение к разработке браузеров. На этом уровне вопросы не решаются мгновенно, но на динамику и приоритет новых механизмов раскладок можно повлиять. К профессиональному сообществу веб-разработчиков производители браузеров, их специалисты по связям с разработчиками, технические специалисты и руководство прислушиваются всегда. Так может, спросим все вместе: «Когда же?»