Что такое container в html
Перейти к содержимому

Что такое container в html

  • автор:

container-type¶

Свойство container-type используется для определения типа включения, используемого в запросе контейнера.

Изображения, фильтры, композиция

  • image-orientation
  • image-rendering
  • image-resolution
  • object-fit
  • object-position
  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • conic-gradient()
  • repeating-conic-gradient()
  • url()
  • element()
  • image()
  • cross-fade()
  • background-blend-mode
  • isolation
  • mix-blend-mode
  • contain
  • contain-intrinsic-block-size
  • contain-intrinsic-height
  • contain-intrinsic-inline-size
  • contain-intrinsic-size
  • contain-intrinsic-width
  • container
  • container-name
  • container-type
  • @container
  • content-visibility

Синтаксис¶

container-type: type>; 

Значения¶

Устанавливает контейнер запросов для запросов размера контейнера как на встроенной, так и на блочной оси как во встроенном, так и в блочном измерениях. Применяет ограничение макета, ограничение стиля и ограничение размера к контейнеру.

Устанавливает контейнер запросов для многомерных запросов на встроенной оси контейнера. Применяет макет, стиль и встроенный размер к элементу.

Элемент не является контейнером запросов для любых запросов размера контейнера, но остается контейнером запросов для запросов в стиле контейнера.

Спецификация¶

Пример¶

Учитывая следующий пример HTML, который представляет собой компонент карты с изображением, заголовком и некоторым текстом:

 1 2 3 4 5 6 7 8 9 10
div class="container"> div class="card"> img src="image.png" alt="Cat with two different color eyes" /> h2>Card titleh2> p>Card contentp> div> div> 

Чтобы создать контекст контейнера, добавьте к элементу свойство container-type . В следующем примере значение inline-size используется для создания контекста включения для встроенной оси контейнера:

1 2 3
.container  container-type: inline-size; > 

Написание запроса к контейнеру с помощью at-правила @container применит стили к элементам контейнера, если он шире 400 пикселей:

1 2 3 4 5 6
@container (min-width: 400px)  .card  display: grid; grid-template-columns: 2fr 1fr; > > 

@container¶

Правило @container — это правило условной группы, которое применяет стили к контексту включения. Объявления стилей фильтруются по условию и применяются к контейнеру, если условие истинно. Условие оценивается, когда контейнер меняет размер.

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

Изображения, фильтры, композиция

  • image-orientation
  • image-rendering
  • image-resolution
  • object-fit
  • object-position
  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • conic-gradient()
  • repeating-conic-gradient()
  • url()
  • element()
  • image()
  • cross-fade()
  • background-blend-mode
  • isolation
  • mix-blend-mode
  • contain
  • contain-intrinsic-block-size
  • contain-intrinsic-height
  • contain-intrinsic-inline-size
  • contain-intrinsic-size
  • contain-intrinsic-width
  • container
  • container-name
  • container-type
  • @container
  • content-visibility

Синтаксис¶

1 2 3
@container container-condition>  /* */ > 

Значения¶

Набор функций, которые оцениваются относительно контейнера запроса при изменении размера контейнера. Стили, определенные в , применяются, если условие истинно.

Набор объявлений CSS.

Логические ключевые слова¶

Логические ключевые слова можно использовать для определения состояния контейнера:

  • and — сочетает в себе два или более условий.
  • or — сочетает в себе два или более условий.
  • not — отрицает условие. Для каждого запроса контейнера допускается только одно условие «не», которое нельзя использовать с ключевыми словами and или or .
 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
@container not (width  400px)  /* */ > @container (width > 400px) and (height > 400px)  /* */ > @container (width > 400px) or (height > 400px)  /* */ > @container (width > 400px) not (height > 400px)  /* */ > 

Именованные контексты изоляции¶

Контекст включения может быть назван с помощью свойства container-name .

1 2 3 4
.post  container-name: sidebar; container-type: inline-size; > 

В контейнерных запросах свойство container-name используется для фильтрации набора контейнеров до контейнеров с совпадающим именем контейнера запроса:

1 2 3
@container sidebar (width > 400px)  /* */ > 

Дескрипторы¶

В условии контейнера можно использовать следующие дескрипторы:

Соотношение сторон контейнера, рассчитанное как отношение ширины к высоте контейнера, выраженное как значение .

Размер блока контейнера, выраженный в виде значения .

Высота контейнера, выраженная как значение .

Инлайновый размер контейнера, выраженный в виде значения .

Ориентация контейнера: landscape или portrait .

Ширина контейнера, выраженная в виде значения .

Спецификация¶

Флекс-контейнер — CSS: Основы Flex

Главной частью концепции Flex является контейнер. Внутри него дочерние элементы начинают подчиняться новой логике, ее мы рассмотрели в прошлом уроке.

Display

Чтобы создать контейнер, используется свойство display со значением flex . Сам контейнер внешне поведет себя как блочный элемент — будет занимать всю доступную ширину. Следовательно, остальные элементы будут отображаться выше или ниже него, в зависимости от их расположения в потоке документа.

Другим возможным значением свойства display является inline-flex . Внутри такого контейнера все будет происходить точно так же, как и при значении flex , но сам контейнер по поведению будет напоминать строчный элемент — он займет ровно столько пространства, сколько необходимо. Другие элементы в потоке смогут обтекать его при необходимости и наличии свободного пространства.

Flex Direction

Что же мы можем сделать с контейнером? Одна из распространенных задач с использованием флекса — перестраивание элементов с оси x на ось y. Это очень частая ситуация при создании мобильных версий сайта. Предположим, что есть флекс-контейнер с тремя дочерними элементами, которые в обычной ситуации отображаются в одну линию.

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

  • column. Значение устанавливает в качестве главной оси ось y. Таким образом меняется не только направление, но и правила выравнивания элементов, которые мы изучим в следующих уроках. В качестве поперечной оси начинает выступать ось x. Данное поведение похоже на то, как если бы систему координат повернули на 90 градусов.
  • column-reverse. Данное значение также выставляет в качестве главной оси ось y, но как бы «переворачивает ее». Элементы в потоке начинают отображаться с конца.
  • row. Стандартное отображение. В качестве главной оси выступает ось x.
  • row-reverse. Элементы выстраиваются по оси x, но с конца оси. Элементы также меняют свой порядок.

Самостоятельное задание

Создайте, используя CodePen , флекс-контейнер, внутри которого создайте еще один флекс-контейнер. Установите им разные значения flex-direction , чтобы увидеть, как элементы внутри этих контейнеров будут отображены в браузере.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

CSS: Flex-контейнер

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

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

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

Одним из способов решения такой задачи является использование модуля Flex из CSS. Для этого достаточно указать свойство display со значением flex у общего блока, внутри которого находятся блоки с практикой и теорией.

 .container 

Для наглядности добавим немного стилей, чтобы увидеть расположение блоков

Тут теория
Тут редактор с практикой

В текущей верстке блок с классом container называется Flex-контейнер, а элементы с классами theory и practice будут называться Flex-элементами. Важно, что flex-элементы это только те элементы, которые лежат непосредственно внутри контейнера.

 .container 

В этой разметке flex-элементами будут блоки с классами theory и practice , но вложенные в них блоки с классами theory-text и vscode уже не являются flex-элементами. На них не будут действовать правила, которые мы изучим в следующих уроках.

Задание

Создайте флекс контейнер с классом qa , внутри которого будет два элемента:

  1. Блок с текстом: Какие языки программирования наиболее востребованы в 2023? . Блок имеет ширину 40% . Класс для блока: question
  2. Блок с текстом: Самыми популярными языками для изучения в 2023 году остаются Python и JavaScript . Ширина блока 60% . Класс для блока: answer

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

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное

  • Все блоки, которые непосредственно находятся внутри контейнера называются Flex-элементами

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *