Sofia Emelianova
Chrome DevTools делает отладку макетов CSS flexbox интуитивно понятной. Панель «Элементы» предоставляет вам контекстно-зависимый редактор Flexbox и настраиваемое наложение.
Посмотрите видео, чтобы узнать, как:
- Используйте редактор Flexbox , чтобы изменять свойства флексбокса одним нажатием кнопки, а не вводить их.
- Переключите наложение флексбокса в окне просмотра, чтобы сразу увидеть внесенные вами изменения.
- Используйте раздел «Элементы » > «Макет» > «Flexbox» , чтобы просмотреть список всех элементов и найти их в дереве DOM. Кроме того, здесь вы можете настроить цвета наложения.
Чтобы узнать больше о CSS flexbox в целом, см. раздел «Изучение CSS > Flexbox» .
Чтобы получить более практический опыт отладки в DevTools, следуйте руководству по проверке и отладке макетов флексбоксов CSS .