DevTools-tips: CSS-flexbox inspecteren en debuggen
Stay organized with collections
Save and categorize content based on your preferences.
Chrome DevTools maakt het debuggen van CSS-flexbox-indelingen intuïtief. Het Elementenpaneel biedt u een contextbewuste Flexbox-editor en aanpasbare overlay.
Bekijk de video om te leren hoe u:
- Gebruik de Flexbox Editor om de eigenschappen van de flexbox te wijzigen met een klik op de knop in plaats van ze te typen.
- Schakel de flexbox-overlay in de viewport in of uit om de wijzigingen die u aanbrengt meteen te zien.
- Gebruik de sectie Elementen > Lay-out > Flexbox om een lijst met alle elementen te bekijken en deze in de DOM-structuur te lokaliseren. Bovendien kunt u hier de overlaykleuren aanpassen.
Zie CSS leren > Flexbox voor meer informatie over CSS-flexbox in het algemeen.
Voor een meer praktische ervaring met foutopsporing in DevTools volgt u de tutorial CSS flexbox-indelingen inspecteren en debuggen .
Tenzij anders vermeld, is de content op deze pagina gelicentieerd onder de Creative Commons Attribution 4.0-licentie en zijn codevoorbeelden gelicentieerd onder de Apache 2.0-licentie. Voor meer informatie raadpleegt u het Google Developers-sitebeleid. Java is een gedeponeerd handelsmerk van Oracle en/of diens aangesloten entiteiten.
Last updated 2022-09-01 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Translation issue","translationIssue","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2022-09-01 UTC."],[],[],null,[]]
