Skip to content

Добавляет интерактивную демку для CSS свойства display#5994

Open
aqwyan wants to merge 4 commits into
doka-guide:mainfrom
aqwyan:main
Open

Добавляет интерактивную демку для CSS свойства display#5994
aqwyan wants to merge 4 commits into
doka-guide:mainfrom
aqwyan:main

Conversation

@aqwyan
Copy link
Copy Markdown

@aqwyan aqwyan commented May 20, 2026

Добавляет интерактивную демку (display-interactive), где пользователь может наглядно увидеть разницу между значениями block, inline, inline-block, flex и grid.

Что сделано:

  • Создана демка в demos/display-interactive/index.html
  • Обновлена статья index.md (добавлен iframe с демкой)

Демка позволяет:

  • Выбирать значение display из выпадающего списка
  • Мгновенно видеть, как меняется расположение блоков
  • Читать пояснения к каждому значению

Предложение новой демки

Превью: https://content-5994.dev.doka.guide/css/display/

@github-actions github-actions Bot added css Контент по CSS дока Справочный материал labels May 20, 2026
@github-actions
Copy link
Copy Markdown

Превью контента из 3c55699 опубликовано.

Comment thread css/display/demosaqwyan
@@ -0,0 +1 @@

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Этот файл не нужно добавлять

@vitya-ne
Copy link
Copy Markdown
Contributor

@aqwyan Привет, спасибо за дополнение.

Файл демки должен быть валидным html-документом.
Документация по оформлению демок: https://github.com/doka-guide/content/blob/main/docs/demos/index.md

container.style.gap = '';
container.style.flexWrap = '';
container.style.gridTemplateColumns = '';
if (value === 'inline') info.innerHTML += 'Режим <strong>inline</strong> — элементы располагаются в строку.';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

css Контент по CSS дока Справочный материал

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants