Советы DevTools: как проверять и отлаживать CSS flexbox

Sofia Emelianova

Chrome DevTools делает отладку макетов CSS flexbox интуитивно понятной. Панель «Элементы» предоставляет вам контекстно-зависимый редактор Flexbox и настраиваемое наложение.

Посмотрите видео, чтобы узнать, как:

• Используйте редактор Flexbox , чтобы изменять свойства флексбокса одним нажатием кнопки, а не вводить их.
• Переключите наложение флексбокса в окне просмотра, чтобы сразу увидеть внесенные вами изменения.
• Используйте раздел «Элементы» > «Макет» > «Flexbox» , чтобы просмотреть список всех элементов и найти их в дереве DOM. Кроме того, здесь вы можете настроить цвета наложения.

Чтобы узнать больше о CSS flexbox в целом, см. раздел «Изучение CSS > Flexbox» .

Чтобы получить более практический опыт отладки в DevTools, следуйте руководству по проверке и отладке макетов флексбоксов CSS .