Шаблон:FlexContainer
Перейти к навигации
Перейти к поиску
Контейнер для контента, использующий свойства CSS flex.
Параметры
| Параметр | Обязательный? | Описание | Значение по умолчанию |
|---|---|---|---|
1 - 25
|
Нет | Элементы контейнера. | — |
| Параметры всего контейнера | |||
justify-content
|
Нет | CSS-свойство justify-content. Отвечает за позиционирование элементов внутри контейнера по горизонтали. Например: center, space-between, end. | — |
align-items
|
Нет | CSS-свойство align-items. Отвечает за позиционирование элементов внутри контейнера по вертикали. | — |
flex-wrap
|
Нет | CSS-свойство flex-wrap. Отвечает за перенос элементов, которые не входят в контейнер. | wrap
|
gap
|
Нет | CSS-свойство gap. Отвечает за расстояние между элементами внутри контейнера. | 20px
|
style
|
Нет | Дополнительные стили контейнера. | — |
class
|
Нет | Дополнительные классы для контейнера. | — |
| Параметры элементов | |||
item-width
|
Нет | Ширина элемента. | — |
item-height
|
Нет | Высота элемента. | — |
item-class
|
Нет | Дополнительные классы для элемента. | — |
item-style
|
Нет | Дополнительные стили для элемента. | — |
Примеры использования
Галерея изображений
{{FlexContainer
|item-class=image-cover
|{{Image|Quest2025_day5_9.png||75px}}
|{{Image|Quest2025_day5_10.png||75px}}
|{{Image|Quest2025_day5_11.png||75px}}
|{{Image|Quest2025_day5_12.png||75px}}
|{{Image|Quest2025_day5_13.png||75px}}
|{{Image|Quest2025_day5_14.png||75px}}
}}
Блоки с текстом
{{FlexContainer
|item-class=image-cover
|item-width=150px
|item-height=135px
|item-style=text-align: justify; border: 1px solid gold; border-radius: 4px; padding: 5px;
|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed augue quis sapien pretium blandit. Nulla facilisi.
|Aenean et odio sit amet purus tincidunt convallis sed nec est. Praesent sit amet tortor gravida, fermentum ex blandit, luctus ipsum.
|Sed venenatis erat eget justo vulputate efficitur.
|Donec sollicitudin, tortor vel fermentum bibendum, ligula elit congue lacus, sit amet lobortis mi magna nec ante. Donec varius pulvinar nunc eu facilisis.
|Pellentesque sit amet libero non justo interdum tincidunt. Integer pulvinar varius sagittis.
}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed augue quis sapien pretium blandit. Nulla facilisi.
Aenean et odio sit amet purus tincidunt convallis sed nec est. Praesent sit amet tortor gravida, fermentum ex blandit, luctus ipsum.
Sed venenatis erat eget justo vulputate efficitur.
Donec sollicitudin, tortor vel fermentum bibendum, ligula elit congue lacus, sit amet lobortis mi magna nec ante. Donec varius pulvinar nunc eu facilisis.
Pellentesque sit amet libero non justo interdum tincidunt. Integer pulvinar varius sagittis.