[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:main-axis-vs-cross-axis-devtools-flex-inspector":772},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},[37,360],{"id":23,"name":15,"slug":38,"icon":5,"icon_url":5,"short_description":39,"meta_title":40,"meta_description":41,"og_image":42,"locale":43,"subcategories":44},"html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[45,72,108,132,208,242,256,284,308,324],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":23,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",false,{"id":12,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":57,"title":58,"slug":59,"order_index":57,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":61,"title":62,"slug":63,"order_index":61,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":65,"title":66,"slug":67,"order_index":65,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":69,"title":70,"slug":71,"order_index":69,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":73,"slug":74,"order_index":12,"topics":75},"Text & Content Basics","text-content-basics",[76,80,84,88,92,96,100,104],{"id":77,"title":78,"slug":79,"order_index":77,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":81,"title":82,"slug":83,"order_index":81,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":85,"title":86,"slug":87,"order_index":85,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":89,"title":90,"slug":91,"order_index":89,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":93,"title":94,"slug":95,"order_index":93,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":97,"title":98,"slug":99,"order_index":97,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":101,"title":102,"slug":103,"order_index":101,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":105,"title":106,"slug":107,"order_index":105,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":57,"name":109,"slug":110,"order_index":57,"topics":111},"Links, Media & Navigation","links-media-navigation",[112,116,120,124,128],{"id":113,"title":114,"slug":115,"order_index":113,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":117,"title":118,"slug":119,"order_index":117,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":121,"title":122,"slug":123,"order_index":121,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":125,"title":126,"slug":127,"order_index":125,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":129,"title":130,"slug":131,"order_index":129,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":61,"name":133,"slug":134,"order_index":61,"topics":135},"Structuring Content","structuring-content",[136,141,146,151,156,160,164,168,172,176,180,184,188,192,196,200,204],{"id":137,"title":138,"slug":139,"order_index":140,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":142,"title":143,"slug":144,"order_index":145,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":147,"title":148,"slug":149,"order_index":150,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":152,"title":153,"slug":154,"order_index":155,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":157,"title":158,"slug":159,"order_index":137,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":161,"title":162,"slug":163,"order_index":142,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":165,"title":166,"slug":167,"order_index":147,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":169,"title":170,"slug":171,"order_index":152,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":173,"title":174,"slug":175,"order_index":157,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":177,"title":178,"slug":179,"order_index":161,"cornerstone":52,"reading_time_minutes":57},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":181,"title":182,"slug":183,"order_index":165,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":185,"title":186,"slug":187,"order_index":169,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":189,"title":190,"slug":191,"order_index":173,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":197,"title":198,"slug":199,"order_index":197,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":201,"title":202,"slug":203,"order_index":201,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":205,"title":206,"slug":207,"order_index":205,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":209,"slug":210,"order_index":65,"topics":211},"Forms & User Input","forms-user-input",[212,217,222,227,232,237],{"id":213,"title":214,"slug":215,"order_index":216,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":218,"title":219,"slug":220,"order_index":221,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":223,"title":224,"slug":225,"order_index":226,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":228,"title":229,"slug":230,"order_index":231,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":233,"title":234,"slug":235,"order_index":236,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":238,"title":239,"slug":240,"order_index":241,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":243,"slug":244,"order_index":69,"topics":245},"Graphics & Visuals","graphics-visuals",[246,251],{"id":247,"title":248,"slug":249,"order_index":250,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":252,"title":253,"slug":254,"order_index":255,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":257,"slug":258,"order_index":77,"topics":259},"Multimedia","multimedia",[260,265,270,275,280],{"id":261,"title":262,"slug":263,"order_index":264,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":266,"title":267,"slug":268,"order_index":269,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":271,"title":272,"slug":273,"order_index":274,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":276,"title":277,"slug":278,"order_index":279,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":281,"title":282,"slug":283,"order_index":213,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":285,"slug":286,"order_index":81,"topics":287},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[288,292,296,300,304],{"id":289,"title":290,"slug":291,"order_index":218,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":293,"title":294,"slug":295,"order_index":223,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":297,"title":298,"slug":299,"order_index":228,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":301,"title":302,"slug":303,"order_index":233,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":305,"title":306,"slug":307,"order_index":238,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":309,"slug":310,"order_index":85,"topics":311},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[312,316,320],{"id":313,"title":314,"slug":315,"order_index":247,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":317,"title":318,"slug":319,"order_index":252,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":321,"title":322,"slug":323,"order_index":261,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":325,"slug":326,"order_index":89,"topics":327},"Reference & Practice","reference-practice",[328,332,336,340,344,348,352,356],{"id":329,"title":330,"slug":331,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":333,"title":334,"slug":335,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":337,"title":338,"slug":339,"order_index":57,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":341,"title":342,"slug":343,"order_index":61,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":345,"title":346,"slug":347,"order_index":65,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":349,"title":350,"slug":351,"order_index":69,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":353,"title":354,"slug":355,"order_index":77,"cornerstone":52,"reading_time_minutes":57},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":357,"title":358,"slug":359,"order_index":81,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":361,"meta_title":362,"meta_description":363,"og_image":5,"locale":43,"subcategories":364},"Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[365,390,418,444,464,500,532,564,596,628,656,684,716,744],{"id":101,"name":366,"slug":367,"order_index":368,"topics":369},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[370,374,378,382,386],{"id":371,"title":372,"slug":373,"order_index":23,"cornerstone":52,"reading_time_minutes":61},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":375,"title":376,"slug":377,"order_index":12,"cornerstone":52,"reading_time_minutes":61},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":379,"title":380,"slug":381,"order_index":57,"cornerstone":52,"reading_time_minutes":57},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":383,"title":384,"slug":385,"order_index":61,"cornerstone":52,"reading_time_minutes":57},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":387,"title":388,"slug":389,"order_index":65,"cornerstone":52,"reading_time_minutes":65},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":152,"name":391,"slug":392,"order_index":368,"topics":393},"Item Properties","item-properties",[394,398,402,406,410,414],{"id":395,"title":396,"slug":397,"order_index":65,"cornerstone":52,"reading_time_minutes":61},176,"CSS flex-direction: Row, Column, Reverse Explained with Examples","css-flex-direction-qYSHRj",{"id":399,"title":400,"slug":401,"order_index":69,"cornerstone":52,"reading_time_minutes":61},177,"CSS flex-wrap and flex-flow: Complete Guide with Examples","css-flex-wrap-and-flex-flow-iZaSUa",{"id":403,"title":404,"slug":405,"order_index":77,"cornerstone":52,"reading_time_minutes":61},178,"CSS justify-content: Align Flex Items on the Main Axis","css-justify-content-VlB71x",{"id":407,"title":408,"slug":409,"order_index":81,"cornerstone":52,"reading_time_minutes":61},179,"CSS align-items: Align Flex Items on the Cross Axis","css-align-items-H3MFZg",{"id":411,"title":412,"slug":413,"order_index":85,"cornerstone":52,"reading_time_minutes":57},180,"CSS align-content: Align Multiple Flex Lines Explained","css-align-content-6815Ey",{"id":415,"title":416,"slug":417,"order_index":89,"cornerstone":52,"reading_time_minutes":57},181,"CSS gap, row-gap and column-gap in Flexbox and Grid","css-gap",{"id":147,"name":419,"slug":420,"order_index":368,"topics":421},"Container Properties","container-properties",[422,426,430,433,436,440],{"id":423,"title":424,"slug":425,"order_index":65,"cornerstone":52,"reading_time_minutes":61},170,"CSS flex-direction: row, row-reverse, column & column-reverse Explained","css-flex-direction",{"id":427,"title":428,"slug":429,"order_index":69,"cornerstone":52,"reading_time_minutes":61},171,"CSS flex-wrap & flex-flow: Wrap Flex Items the Right Way","css-flex-wrap-and-flex-flow",{"id":431,"title":404,"slug":432,"order_index":77,"cornerstone":52,"reading_time_minutes":61},172,"css-justify-content",{"id":434,"title":408,"slug":435,"order_index":81,"cornerstone":52,"reading_time_minutes":57},173,"css-align-items",{"id":437,"title":438,"slug":439,"order_index":85,"cornerstone":52,"reading_time_minutes":57},174,"CSS align-content: Space and Align Multiple Flex Lines","css-align-content",{"id":441,"title":442,"slug":443,"order_index":89,"cornerstone":52,"reading_time_minutes":61},175,"CSS gap, row-gap & column-gap in Flexbox: Modern Spacing","css-flexbox-gap",{"id":142,"name":445,"slug":446,"order_index":368,"topics":447},"Flexbox Foundations","flexbox-foundations",[448,452,456,460],{"id":449,"title":450,"slug":451,"order_index":23,"cornerstone":52,"reading_time_minutes":81},166,"Why Layout Evolved: Tables, Floats, Flexbox and Grid","why-layout-evolved-tables-floats-flexbox-grid",{"id":453,"title":454,"slug":455,"order_index":12,"cornerstone":52,"reading_time_minutes":69},167,"Flexbox Introduction and Mental Model","flexbox-introduction-and-mental-model",{"id":457,"title":458,"slug":459,"order_index":57,"cornerstone":52,"reading_time_minutes":69},168,"Flex Container and Flex Items","flex-container-and-flex-items",{"id":461,"title":462,"slug":463,"order_index":61,"cornerstone":52,"reading_time_minutes":77},169,"Main Axis vs Cross Axis and the DevTools Flex Inspector","main-axis-vs-cross-axis-devtools-flex-inspector",{"id":105,"name":465,"slug":466,"order_index":23,"topics":467},"Selectors & the Cascade","selectors-the-cascade",[468,472,476,480,484,488,492,496],{"id":469,"title":470,"slug":471,"order_index":69,"cornerstone":52,"reading_time_minutes":61},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":473,"title":474,"slug":475,"order_index":77,"cornerstone":52,"reading_time_minutes":61},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":477,"title":478,"slug":479,"order_index":81,"cornerstone":52,"reading_time_minutes":61},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":481,"title":482,"slug":483,"order_index":85,"cornerstone":52,"reading_time_minutes":69},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":485,"title":486,"slug":487,"order_index":89,"cornerstone":52,"reading_time_minutes":65},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":489,"title":490,"slug":491,"order_index":93,"cornerstone":52,"reading_time_minutes":65},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":493,"title":494,"slug":495,"order_index":97,"cornerstone":52,"reading_time_minutes":61},93,"CSS Specificity Explained","css-specificity-explained",{"id":497,"title":498,"slug":499,"order_index":101,"cornerstone":52,"reading_time_minutes":65},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":113,"name":501,"slug":502,"order_index":12,"topics":503},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[504,508,512,516,520,524,528],{"id":505,"title":506,"slug":507,"order_index":105,"cornerstone":52,"reading_time_minutes":65},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":509,"title":510,"slug":511,"order_index":113,"cornerstone":52,"reading_time_minutes":61},96,"CSS Backgrounds","css-backgrounds",{"id":513,"title":514,"slug":515,"order_index":117,"cornerstone":52,"reading_time_minutes":65},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":517,"title":518,"slug":519,"order_index":121,"cornerstone":52,"reading_time_minutes":65},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":521,"title":522,"slug":523,"order_index":125,"cornerstone":52,"reading_time_minutes":69},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":525,"title":526,"slug":527,"order_index":129,"cornerstone":52,"reading_time_minutes":65},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":529,"title":530,"slug":531,"order_index":140,"cornerstone":52,"reading_time_minutes":69},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":117,"name":533,"slug":534,"order_index":57,"topics":535},"Box Model & Spacing","box-model-spacing",[536,540,544,548,552,556,560],{"id":537,"title":538,"slug":539,"order_index":145,"cornerstone":52,"reading_time_minutes":77},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":541,"title":542,"slug":543,"order_index":150,"cornerstone":52,"reading_time_minutes":77},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":545,"title":546,"slug":547,"order_index":155,"cornerstone":52,"reading_time_minutes":69},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":549,"title":550,"slug":551,"order_index":137,"cornerstone":52,"reading_time_minutes":85},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":553,"title":554,"slug":555,"order_index":142,"cornerstone":52,"reading_time_minutes":65},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":557,"title":558,"slug":559,"order_index":147,"cornerstone":52,"reading_time_minutes":77},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":561,"title":562,"slug":563,"order_index":152,"cornerstone":52,"reading_time_minutes":77},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":121,"name":565,"slug":566,"order_index":61,"topics":567},"Typography & Text","typography-text",[568,572,576,580,584,588,592],{"id":569,"title":570,"slug":571,"order_index":157,"cornerstone":52,"reading_time_minutes":77},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":573,"title":574,"slug":575,"order_index":161,"cornerstone":52,"reading_time_minutes":77},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":577,"title":578,"slug":579,"order_index":165,"cornerstone":52,"reading_time_minutes":77},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":581,"title":582,"slug":583,"order_index":169,"cornerstone":52,"reading_time_minutes":77},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":585,"title":586,"slug":587,"order_index":173,"cornerstone":52,"reading_time_minutes":81},113,"Styling Links","styling-links-css",{"id":589,"title":590,"slug":591,"order_index":193,"cornerstone":52,"reading_time_minutes":77},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":593,"title":594,"slug":595,"order_index":197,"cornerstone":52,"reading_time_minutes":89},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":125,"name":597,"slug":598,"order_index":65,"topics":599},"Display, Position & Layout Basics","display-position-layout-basics",[600,604,608,612,616,620,624],{"id":601,"title":602,"slug":603,"order_index":201,"cornerstone":52,"reading_time_minutes":77},116,"Display & Inline-block","display-and-inline-block",{"id":605,"title":606,"slug":607,"order_index":205,"cornerstone":52,"reading_time_minutes":69},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":609,"title":610,"slug":611,"order_index":216,"cornerstone":52,"reading_time_minutes":69},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":613,"title":614,"slug":615,"order_index":221,"cornerstone":52,"reading_time_minutes":65},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":617,"title":618,"slug":619,"order_index":226,"cornerstone":52,"reading_time_minutes":69},120,"Centering Techniques","centering-techniques",{"id":621,"title":622,"slug":623,"order_index":231,"cornerstone":52,"reading_time_minutes":77},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":625,"title":626,"slug":627,"order_index":236,"cornerstone":52,"reading_time_minutes":81},122,"Website Layout Basics","website-layout-basics",{"id":140,"name":629,"slug":630,"order_index":69,"topics":631},"The Modern CSS Toolkit","the-modern-css-toolkit",[632,636,640,644,648,652],{"id":633,"title":634,"slug":635,"order_index":241,"cornerstone":52,"reading_time_minutes":81},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":637,"title":638,"slug":639,"order_index":250,"cornerstone":52,"reading_time_minutes":81},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":641,"title":642,"slug":643,"order_index":255,"cornerstone":52,"reading_time_minutes":77},131,"Native CSS Nesting","native-css-nesting",{"id":645,"title":646,"slug":647,"order_index":264,"cornerstone":52,"reading_time_minutes":77},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":649,"title":650,"slug":651,"order_index":269,"cornerstone":52,"reading_time_minutes":85},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":653,"title":654,"slug":655,"order_index":274,"cornerstone":52,"reading_time_minutes":81},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":145,"name":657,"slug":658,"order_index":77,"topics":659},"Responsive Design","responsive-design",[660,664,668,672,676,680],{"id":661,"title":662,"slug":663,"order_index":279,"cornerstone":52,"reading_time_minutes":85},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":665,"title":666,"slug":667,"order_index":213,"cornerstone":52,"reading_time_minutes":81},136,"Media Queries","media-queries",{"id":669,"title":670,"slug":671,"order_index":218,"cornerstone":52,"reading_time_minutes":81},137,"Responsive Images & Video","responsive-images-and-video",{"id":673,"title":674,"slug":675,"order_index":223,"cornerstone":52,"reading_time_minutes":85},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":677,"title":678,"slug":679,"order_index":228,"cornerstone":52,"reading_time_minutes":85},139,"Container Queries","container-queries",{"id":681,"title":682,"slug":683,"order_index":233,"cornerstone":52,"reading_time_minutes":97},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":150,"name":685,"slug":686,"order_index":81,"topics":687},"Transitions & Animation","transitions-animation",[688,692,696,700,704,708,712],{"id":689,"title":690,"slug":691,"order_index":238,"cornerstone":52,"reading_time_minutes":65},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":693,"title":694,"slug":695,"order_index":247,"cornerstone":52,"reading_time_minutes":61},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":697,"title":698,"slug":699,"order_index":252,"cornerstone":52,"reading_time_minutes":65},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":701,"title":702,"slug":703,"order_index":261,"cornerstone":52,"reading_time_minutes":65},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":705,"title":706,"slug":707,"order_index":266,"cornerstone":52,"reading_time_minutes":65},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":709,"title":710,"slug":711,"order_index":271,"cornerstone":52,"reading_time_minutes":65},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":713,"title":714,"slug":715,"order_index":276,"cornerstone":52,"reading_time_minutes":69},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance",{"id":155,"name":717,"slug":718,"order_index":85,"topics":719},"UI Components","ui-components",[720,724,728,732,736,740],{"id":721,"title":722,"slug":723,"order_index":281,"cornerstone":52,"reading_time_minutes":69},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":725,"title":726,"slug":727,"order_index":289,"cornerstone":52,"reading_time_minutes":69},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":729,"title":730,"slug":731,"order_index":293,"cornerstone":52,"reading_time_minutes":77},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":733,"title":734,"slug":735,"order_index":297,"cornerstone":52,"reading_time_minutes":69},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":737,"title":738,"slug":739,"order_index":301,"cornerstone":52,"reading_time_minutes":69},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":741,"title":742,"slug":743,"order_index":305,"cornerstone":52,"reading_time_minutes":69},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":137,"name":745,"slug":746,"order_index":89,"topics":747},"Pro Practices & Wrap-up","pro-practices-wrap-up",[748,752,756,760,764,768],{"id":749,"title":750,"slug":751,"order_index":313,"cornerstone":52,"reading_time_minutes":12},160,"CSS Architecture & BEM","css-architecture-bem-ZRlwjD",{"id":753,"title":754,"slug":755,"order_index":317,"cornerstone":52,"reading_time_minutes":12},161,"CSS Performance","css-performance-TAnsqs",{"id":757,"title":758,"slug":759,"order_index":321,"cornerstone":52,"reading_time_minutes":12},162,"CSS Accessibility (focus, contrast)","css-accessibility-focus-contrast-pgFUSF",{"id":761,"title":762,"slug":763,"order_index":329,"cornerstone":52,"reading_time_minutes":12},163,"Debugging Common CSS Bugs","debugging-common-css-bugs-iHzOV3",{"id":765,"title":766,"slug":767,"order_index":333,"cornerstone":52,"reading_time_minutes":12},164,"Sass vs Native CSS","sass-vs-native-css-lV2nqW",{"id":769,"title":770,"slug":771,"order_index":337,"cornerstone":52,"reading_time_minutes":12},165,"CSS Interview Q&A & Cheat Sheet","css-interview-qa-cheat-sheet-JslzGp",{"data":773},{"id":461,"title":462,"slug":463,"content":774,"course":775,"subcategory":776,"author":777,"reading_time_minutes":77,"cornerstone":52,"schema_type":783,"faq_json":5,"video_url":5,"canonical_url":784,"meta_title":785,"meta_description":786,"og_image":5,"toc_json":787,"code_examples":852,"quiz":5,"exercises":875,"published_at":5,"updated_at":890,"prev":891,"next":892},"\u003Ch2 id=\"flexbox-main-axis-vs-cross-axis\">Flexbox Main Axis vs Cross Axis\u003C\u002Fh2>\u003Cp>The \u003Cstrong>flexbox main axis\u003C\u002Fstrong> and \u003Cstrong>cross axis\u003C\u002Fstrong> are the most important concept for understanding why \u003Ccode>justify-content\u003C\u002Fcode> and \u003Ccode>align-items\u003C\u002Fcode> sometimes seem to \"swap\". They do not swap. The axes themselves rotate when you change \u003Ccode>flex-direction\u003C\u002Fcode>, and the properties follow the axes. Once you see this, Flexbox stops feeling random.\u003C\u002Fp>\u003Ch3 id=\"what-you-will-learn\">What You Will Learn\u003C\u002Fh3>\u003Cul>\u003Cli>What the main axis and cross axis are\u003C\u002Fli>\u003Cli>How \u003Ccode>flex-direction\u003C\u002Fcode> decides which axis is which\u003C\u002Fli>\u003Cli>Which properties work on the main axis and which on the cross axis\u003C\u002Fli>\u003Cli>Why \u003Ccode>justify-content\u003C\u002Fcode> may seem to do nothing in a column layout\u003C\u002Fli>\u003Cli>How writing mode and right-to-left text affect axes\u003C\u002Fli>\u003Cli>How to debug flex layouts with the DevTools flex inspector (Chrome, Edge and Firefox)\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"the-two-axes\">The Two Axes\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Main axis:\u003C\u002Fstrong> the direction in which flex items are laid out. Set by \u003Ccode>flex-direction\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Cstrong>Cross axis:\u003C\u002Fstrong> always perpendicular to the main axis.\u003C\u002Fli>\u003C\u002Ful>\u003Cpre>\u003Ccode class=\"language-text\">flex-direction: row (default)\n\n   main axis  ------------------------->\n  +-----------------------------------+   |\n  |  [ 1 ]  [ 2 ]  [ 3 ]              |   | cross axis\n  +-----------------------------------+   v\n\n\nflex-direction: column\n\n  +-----------+    main axis\n  |   [ 1 ]   |        |\n  |   [ 2 ]   |        |\n  |   [ 3 ]   |        v\n  +-----------+\n   ---------> cross axis\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"how-flex-direction-sets-the-axes\">How flex-direction Sets the Axes\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>\u003Ccode>flex-direction\u003C\u002Fcode>\u003C\u002Fth>\u003Cth>Main axis\u003C\u002Fth>\u003Cth>Cross axis\u003C\u002Fth>\u003Cth>Items start from\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>row\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Horizontal\u003C\u002Ftd>\u003Ctd>Vertical\u003C\u002Ftd>\u003Ctd>Left (in LTR)\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>row-reverse\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Horizontal\u003C\u002Ftd>\u003Ctd>Vertical\u003C\u002Ftd>\u003Ctd>Right (in LTR)\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>column\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Vertical\u003C\u002Ftd>\u003Ctd>Horizontal\u003C\u002Ftd>\u003Ctd>Top\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>column-reverse\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Vertical\u003C\u002Ftd>\u003Ctd>Horizontal\u003C\u002Ftd>\u003Ctd>Bottom\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"which-property-works-on-which-axis\">Which Property Works on Which Axis?\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Property\u003C\u002Fth>\u003Cth>Axis\u003C\u002Fth>\u003Cth>Applies to\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>justify-content\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Main axis\u003C\u002Ftd>\u003Ctd>Container\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>align-items\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Cross axis\u003C\u002Ftd>\u003Ctd>Container\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>align-self\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Cross axis\u003C\u002Ftd>\u003Ctd>Single item\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>align-content\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Cross axis (multi-line only)\u003C\u002Ftd>\u003Ctd>Container with wrapping\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>flex-grow\u003C\u002Fcode>, \u003Ccode>flex-shrink\u003C\u002Fcode>, \u003Ccode>flex-basis\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Main axis\u003C\u002Ftd>\u003Ctd>Items\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>gap\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Both\u003C\u002Ftd>\u003Ctd>Container\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>\u003Cstrong>The golden rule:\u003C\u002Fstrong> \u003Ccode>justify-content\u003C\u002Fcode> is always about the \u003Cem>main\u003C\u002Fem> axis, \u003Ccode>align-items\u003C\u002Fcode> is always about the \u003Cem>cross\u003C\u002Fem> axis. Only the physical direction changes.\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Goal\u003C\u002Fth>\u003Cth>Row container\u003C\u002Fth>\u003Cth>Column container\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Center horizontally\u003C\u002Ftd>\u003Ctd>\u003Ccode>justify-content: center\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>\u003Ccode>align-items: center\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Center vertically\u003C\u002Ftd>\u003Ctd>\u003Ccode>align-items: center\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>\u003Ccode>justify-content: center\u003C\u002Fcode>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"why-justify-content-seems-broken-in-a-column\">Why justify-content Seems Broken in a Column\u003C\u002Fh2>\u003Cp>This is the number one Flexbox question. In a column container, the main axis is vertical, so \u003Ccode>justify-content\u003C\u002Fcode> distributes space vertically. But a container with \u003Ccode>height: auto\u003C\u002Fcode> is exactly as tall as its content, so there is \u003Cstrong>no free space\u003C\u002Fstrong> to distribute. Nothing visibly happens. Give the container a height (or \u003Ccode>min-height\u003C\u002Fcode>) and it works.\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.column {\n  display: flex;\n  flex-direction: column;\n  min-height: 300px;        \u002F* creates free space on the main axis *\u002F\n  justify-content: center;  \u002F* now it can center vertically *\u002F\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"writing-mode-and-right-to-left-layouts\">Writing Mode and Right-to-Left Layouts\u003C\u002Fh2>\u003Cp>Flexbox uses \u003Cstrong>logical\u003C\u002Fstrong> directions, not physical ones. In a right-to-left language such as Urdu or Arabic, \u003Ccode>flex-direction: row\u003C\u002Fcode> starts from the right, so \u003Ccode>flex-start\u003C\u002Fcode> means the right side. In vertical writing modes the row direction turns vertical. This is why Flexbox uses \u003Ccode>flex-start\u003C\u002Fcode> and \u003Ccode>flex-end\u003C\u002Fcode> instead of \u003Ccode>left\u003C\u002Fcode> and \u003Ccode>right\u003C\u002Fcode>, and why it is a strong choice for multilingual and internationalised interfaces.\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">html[dir='rtl'] .toolbar {\n  display: flex;           \u002F* row starts from the right automatically *\u002F\n  justify-content: flex-start;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"aligning-on-the-cross-axis\">Aligning on the Cross Axis\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>\u003Ccode>align-items\u003C\u002Fcode>\u003C\u002Fth>\u003Cth>Result in a row container\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>stretch\u003C\u002Fcode> (default)\u003C\u002Ftd>\u003Ctd>Items stretch to fill the container height (if they have no fixed height)\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>flex-start\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Items align to the top\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>center\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Items centered vertically\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>flex-end\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Items align to the bottom\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>\u003Ccode>baseline\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Text baselines line up, great for mixed font sizes\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch3 id=\"align-items-vs-align-content\">\u003Ccode>align-items\u003C\u002Fcode> vs \u003Ccode>align-content\u003C\u002Fcode>\u003C\u002Fh3>\u003Cp>\u003Ccode>align-items\u003C\u002Fcode> aligns items \u003Cem>within each flex line\u003C\u002Fem>. \u003Ccode>align-content\u003C\u002Fcode> distributes the \u003Cem>lines themselves\u003C\u002Fem> and only has a visible effect when \u003Ccode>flex-wrap: wrap\u003C\u002Fcode> creates more than one line and the container has extra cross-axis space.\u003C\u002Fp>\u003Ch2 id=\"the-margin-auto-trick-on-the-main-axis\">The margin: auto Trick on the Main Axis\u003C\u002Fh2>\u003Cp>Auto margins absorb free space before \u003Ccode>justify-content\u003C\u002Fcode> is applied. That makes \u003Ccode>margin-left: auto\u003C\u002Fcode> (or \u003Ccode>margin-inline-start: auto\u003C\u002Fcode>) the cleanest way to push one item to the far end, as in a navbar where the logo stays left and the buttons go right.\u003C\u002Fp>\u003Ch2 id=\"debugging-with-the-devtools-flex-inspector\">Debugging with the DevTools Flex Inspector\u003C\u002Fh2>\u003Cp>You do not have to guess which axis is which. Modern browser DevTools show flex layouts visually. The steps below use Chrome DevTools, and Microsoft Edge works the same way because it is also Chromium-based.\u003C\u002Fp>\u003Ch3 id=\"chrome-edge-devtools\">Chrome \u002F Edge DevTools\u003C\u002Fh3>\u003Col>\u003Cli>\u003Cstrong>Open DevTools:\u003C\u002Fstrong> right-click the element and choose Inspect, or press F12.\u003C\u002Fli>\u003Cli>\u003Cstrong>Find the flex badge:\u003C\u002Fstrong> in the Elements panel, any element with \u003Ccode>display: flex\u003C\u002Fcode> or \u003Ccode>inline-flex\u003C\u002Fcode> shows a small \u003Cstrong>flex\u003C\u002Fstrong> badge next to its tag.\u003C\u002Fli>\u003Cli>\u003Cstrong>Toggle the overlay:\u003C\u002Fstrong> click the badge. The page highlights the container, each flex item, and the free space and gaps between them, so you can see exactly where space is left over.\u003C\u002Fli>\u003Cli>\u003Cstrong>Use the Layout pane:\u003C\u002Fstrong> open the Layout tab (next to Styles; it may be under the double-arrow menu). The Flexbox section lists every flex container on the page with a checkbox to show or hide each overlay, plus colour options.\u003C\u002Fli>\u003Cli>\u003Cstrong>Try the flexbox editor:\u003C\u002Fstrong> in the Styles pane, click the small flex icon next to \u003Ccode>display: flex\u003C\u002Fcode>. A popup lets you click through \u003Ccode>flex-direction\u003C\u002Fcode>, \u003Ccode>justify-content\u003C\u002Fcode>, \u003Ccode>align-items\u003C\u002Fcode> and related values, and see the result instantly on the page.\u003C\u002Fli>\u003Cli>\u003Cstrong>Edit live:\u003C\u002Fstrong> change values in the Styles pane or tick and untick declarations to see which one causes the problem.\u003C\u002Fli>\u003C\u002Fol>\u003Ch3 id=\"firefox-devtools\">Firefox DevTools\u003C\u002Fh3>\u003Col>\u003Cli>Open the Inspector and look for the \u003Cstrong>flex\u003C\u002Fstrong> badge on a flex container in the markup view.\u003C\u002Fli>\u003Cli>Click the badge to highlight the container and its items on the page.\u003C\u002Fli>\u003Cli>Open the \u003Cstrong>Layout\u003C\u002Fstrong> panel and use the Flexbox section. Select a flex item to see how its final size was calculated from its base size, flex-grow, flex-shrink and min\u002Fmax constraints. This is very useful for understanding why an item is smaller or larger than expected.\u003C\u002Fli>\u003C\u002Fol>\u003Ch3 id=\"a-quick-debugging-checklist\">A Quick Debugging Checklist\u003C\u002Fh3>\u003Cul>\u003Cli>Is \u003Ccode>display: flex\u003C\u002Fcode> on the correct parent? (Look for the badge.)\u003C\u002Fli>\u003Cli>What is the current \u003Ccode>flex-direction\u003C\u002Fcode>? That tells you which axis is main.\u003C\u002Fli>\u003Cli>Is there free space on that axis? (Look at the overlay.)\u003C\u002Fli>\u003Cli>Is \u003Ccode>flex-wrap\u003C\u002Fcode> set? Does \u003Ccode>align-content\u003C\u002Fcode> have lines to work with?\u003C\u002Fli>\u003Cli>Is an item being held open by \u003Ccode>min-width: auto\u003C\u002Fcode>?\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"common-mistakes\">Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Assuming \u003Ccode>justify-content\u003C\u002Fcode> is always horizontal.\u003C\u002Fstrong> It follows the main axis.\u003C\u002Fli>\u003Cli>\u003Cstrong>Using \u003Ccode>align-content\u003C\u002Fcode> on a single-line container.\u003C\u002Fstrong> It has no effect unless there are multiple lines.\u003C\u002Fli>\u003Cli>\u003Cstrong>Forgetting the height in column layouts.\u003C\u002Fstrong> No free space means no visible alignment.\u003C\u002Fli>\u003Cli>\u003Cstrong>Using \u003Ccode>row-reverse\u003C\u002Fcode> to fix visual order and ignoring accessibility.\u003C\u002Fstrong> Keyboard and screen reader order stays the same as the HTML.\u003C\u002Fli>\u003Cli>\u003Cstrong>Debugging by guessing.\u003C\u002Fstrong> Use the flex badge and overlay first.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cul>\u003Cli>The main axis follows \u003Ccode>flex-direction\u003C\u002Fcode>; the cross axis is perpendicular.\u003C\u002Fli>\u003Cli>\u003Ccode>justify-content\u003C\u002Fcode> = main axis, \u003Ccode>align-items\u003C\u002Fcode> = cross axis, always.\u003C\u002Fli>\u003Cli>Column layouts need available height for \u003Ccode>justify-content\u003C\u002Fcode> to show an effect.\u003C\u002Fli>\u003Cli>Use auto margins to push one item to the end of the main axis.\u003C\u002Fli>\u003Cli>The DevTools flex badge, overlay, Layout pane and flexbox editor turn Flexbox debugging from guesswork into a quick visual check.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  .container { display: flex; flex-direction: row; justify-content: space-around; align-items: center; height: 160px; background: #ecf0f1; border: 2px dashed #7f8c8d; }\n  .item { background: #3498db; color: #fff; padding: 14px 20px; border-radius: 6px; }\n<\u002Fstyle>\n<div class='container'>\n  <div class='item'>1<\u002Fdiv>\n  <div class='item'>2<\u002Fdiv>\n  <div class='item'>3<\u002Fdiv>\n<\u002Fdiv>\n<p>Row: main axis is horizontal. Change flex-direction to <b>column<\u002Fb> and watch justify-content and align-items swap directions.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  .container { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 220px; background: #ecf0f1; border: 2px dashed #7f8c8d; padding-left: 10px; }\n  .item { background: #e74c3c; color: #fff; padding: 10px 18px; margin: 4px 0; border-radius: 6px; }\n<\u002Fstyle>\n<div class='container'>\n  <div class='item'>1<\u002Fdiv>\n  <div class='item'>2<\u002Fdiv>\n  <div class='item'>3<\u002Fdiv>\n<\u002Fdiv>\n<p>Column: justify-content (center) works vertically, align-items (flex-start) works horizontally. Remove the height and justify-content seems to stop working.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; color: #fff; }\n  .box { display: flex; gap: 8px; background: #ecf0f1; padding: 8px; margin-bottom: 10px; }\n  .box div { background: #8e44ad; padding: 10px 16px; border-radius: 6px; }\n  .reverse { flex-direction: row-reverse; }\n  .colrev { flex-direction: column-reverse; width: 120px; }\n<\u002Fstyle>\n<div class='box'><div>1<\u002Fdiv><div>2<\u002Fdiv><div>3<\u002Fdiv><\u002Fdiv>\n<div class='box reverse'><div>1<\u002Fdiv><div>2<\u002Fdiv><div>3<\u002Fdiv><\u002Fdiv>\n<div class='box colrev'><div>1<\u002Fdiv><div>2<\u002Fdiv><div>3<\u002Fdiv><\u002Fdiv>\n<p style='color:#333'>row, row-reverse and column-reverse. Source order never changes, only visual order.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; color: #fff; }\n  .container { display: flex; height: 140px; gap: 10px; background: #ecf0f1; padding: 10px; }\n  .item { background: #16a085; padding: 10px 16px; border-radius: 6px; }\n  .s { align-self: flex-start; }\n  .c { align-self: center; }\n  .e { align-self: flex-end; }\n  .st { align-self: stretch; }\n<\u002Fstyle>\n<div class='container'>\n  <div class='item s'>start<\u002Fdiv>\n  <div class='item c'>center<\u002Fdiv>\n  <div class='item e'>end<\u002Fdiv>\n  <div class='item st'>stretch<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  .container { display: flex; flex-wrap: wrap; align-content: space-between; gap: 8px; height: 240px; width: 260px; background: #ecf0f1; border: 2px dashed #7f8c8d; padding: 8px; }\n  .item { width: 110px; height: 40px; background: #f39c12; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 6px; }\n<\u002Fstyle>\n<div class='container'>\n  <div class='item'>1<\u002Fdiv><div class='item'>2<\u002Fdiv>\n  <div class='item'>3<\u002Fdiv><div class='item'>4<\u002Fdiv>\n<\u002Fdiv>\n<p>align-content spaces out the <b>lines<\u002Fb>. Try center, flex-start, flex-end, stretch.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { margin: 0; font-family: sans-serif; }\n  .nav { display: flex; align-items: center; gap: 14px; background: #2c3e50; color: #fff; padding: 12px 18px; }\n  .nav a { color: #ecf0f1; text-decoration: none; }\n  .push { margin-left: auto; background: #e74c3c; padding: 8px 14px; border-radius: 6px; }\n<\u002Fstyle>\n<nav class='nav'>\n  <strong>Logo<\u002Fstrong>\n  <a href='#'>Home<\u002Fa>\n  <a href='#'>Courses<\u002Fa>\n  <a class='push' href='#'>Login<\u002Fa>\n<\u002Fnav>\n<p style='padding:0 18px'>margin-left: auto absorbs all free space on the main axis.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  \u002F* Open DevTools, inspect .toolbar and click the flex badge to see the overlay *\u002F\n  body { font-family: sans-serif; }\n  .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; background: #ecf0f1; border: 2px solid #bdc3c7; }\n  .toolbar button { padding: 10px 16px; border: 0; border-radius: 6px; background: #3498db; color: #fff; cursor: pointer; }\n  .toolbar .grow { flex: 1; background: #fff; padding: 10px; border: 1px solid #bdc3c7; border-radius: 6px; }\n<\u002Fstyle>\n<div class='toolbar'>\n  <button>Back<\u002Fbutton>\n  <div class='grow'>Flexible area (flex: 1)<\u002Fdiv>\n  <button>Save<\u002Fbutton>\n<\u002Fdiv>\n<p>Right-click the toolbar, choose Inspect, click the flex badge, then try the flexbox editor icon next to <code>display: flex<\u002Fcode>.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":445,"slug":446},{"slug":778,"display_name":779,"job_title":5,"short_bio":5,"expertise_tags":780,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":781,"posts":782},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fmain-axis-vs-cross-axis-devtools-flex-inspector","Flexbox Main Axis vs Cross Axis + DevTools Flex Inspector","Master the flexbox main axis vs cross axis, justify-content vs align-items, and debug layouts with the Chrome and Firefox DevTools flex inspector.",[788,796,800,804,808,812,816,824,828,844,848],{"id":789,"text":790,"level":12,"children":791},"flexbox-main-axis-vs-cross-axis","Flexbox Main Axis vs Cross Axis",[792],{"id":793,"text":794,"level":57,"children":795},"what-you-will-learn","What You Will Learn",[],{"id":797,"text":798,"level":12,"children":799},"the-two-axes","The Two Axes",[],{"id":801,"text":802,"level":12,"children":803},"how-flex-direction-sets-the-axes","How flex-direction Sets the Axes",[],{"id":805,"text":806,"level":12,"children":807},"which-property-works-on-which-axis","Which Property Works on Which Axis?",[],{"id":809,"text":810,"level":12,"children":811},"why-justify-content-seems-broken-in-a-column","Why justify-content Seems Broken in a Column",[],{"id":813,"text":814,"level":12,"children":815},"writing-mode-and-right-to-left-layouts","Writing Mode and Right-to-Left Layouts",[],{"id":817,"text":818,"level":12,"children":819},"aligning-on-the-cross-axis","Aligning on the Cross Axis",[820],{"id":821,"text":822,"level":57,"children":823},"align-items-vs-align-content","align-items vs align-content",[],{"id":825,"text":826,"level":12,"children":827},"the-margin-auto-trick-on-the-main-axis","The margin: auto Trick on the Main Axis",[],{"id":829,"text":830,"level":12,"children":831},"debugging-with-the-devtools-flex-inspector","Debugging with the DevTools Flex Inspector",[832,836,840],{"id":833,"text":834,"level":57,"children":835},"chrome-edge-devtools","Chrome \u002F Edge DevTools",[],{"id":837,"text":838,"level":57,"children":839},"firefox-devtools","Firefox DevTools",[],{"id":841,"text":842,"level":57,"children":843},"a-quick-debugging-checklist","A Quick Debugging Checklist",[],{"id":845,"text":846,"level":12,"children":847},"common-mistakes","Common Mistakes",[],{"id":849,"text":850,"level":12,"children":851},"key-takeaways","Key Takeaways",[],[853,857,860,863,866,869,872],{"id":854,"language":16,"code":855,"is_editable":856},681,"\u003Cstyle>\n  body { font-family: sans-serif; }\n  .container { display: flex; flex-direction: row; justify-content: space-around; align-items: center; height: 160px; background: #ecf0f1; border: 2px dashed #7f8c8d; }\n  .item { background: #3498db; color: #fff; padding: 14px 20px; border-radius: 6px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='container'>\n  \u003Cdiv class='item'>1\u003C\u002Fdiv>\n  \u003Cdiv class='item'>2\u003C\u002Fdiv>\n  \u003Cdiv class='item'>3\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>Row: main axis is horizontal. Change flex-direction to \u003Cb>column\u003C\u002Fb> and watch justify-content and align-items swap directions.\u003C\u002Fp>",true,{"id":858,"language":16,"code":859,"is_editable":856},682,"\u003Cstyle>\n  body { font-family: sans-serif; }\n  .container { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 220px; background: #ecf0f1; border: 2px dashed #7f8c8d; padding-left: 10px; }\n  .item { background: #e74c3c; color: #fff; padding: 10px 18px; margin: 4px 0; border-radius: 6px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='container'>\n  \u003Cdiv class='item'>1\u003C\u002Fdiv>\n  \u003Cdiv class='item'>2\u003C\u002Fdiv>\n  \u003Cdiv class='item'>3\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>Column: justify-content (center) works vertically, align-items (flex-start) works horizontally. Remove the height and justify-content seems to stop working.\u003C\u002Fp>",{"id":861,"language":16,"code":862,"is_editable":856},683,"\u003Cstyle>\n  body { font-family: sans-serif; color: #fff; }\n  .box { display: flex; gap: 8px; background: #ecf0f1; padding: 8px; margin-bottom: 10px; }\n  .box div { background: #8e44ad; padding: 10px 16px; border-radius: 6px; }\n  .reverse { flex-direction: row-reverse; }\n  .colrev { flex-direction: column-reverse; width: 120px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='box'>\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class='box reverse'>\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class='box colrev'>\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp style='color:#333'>row, row-reverse and column-reverse. Source order never changes, only visual order.\u003C\u002Fp>",{"id":864,"language":16,"code":865,"is_editable":856},684,"\u003Cstyle>\n  body { font-family: sans-serif; color: #fff; }\n  .container { display: flex; height: 140px; gap: 10px; background: #ecf0f1; padding: 10px; }\n  .item { background: #16a085; padding: 10px 16px; border-radius: 6px; }\n  .s { align-self: flex-start; }\n  .c { align-self: center; }\n  .e { align-self: flex-end; }\n  .st { align-self: stretch; }\n\u003C\u002Fstyle>\n\u003Cdiv class='container'>\n  \u003Cdiv class='item s'>start\u003C\u002Fdiv>\n  \u003Cdiv class='item c'>center\u003C\u002Fdiv>\n  \u003Cdiv class='item e'>end\u003C\u002Fdiv>\n  \u003Cdiv class='item st'>stretch\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":867,"language":16,"code":868,"is_editable":856},685,"\u003Cstyle>\n  body { font-family: sans-serif; }\n  .container { display: flex; flex-wrap: wrap; align-content: space-between; gap: 8px; height: 240px; width: 260px; background: #ecf0f1; border: 2px dashed #7f8c8d; padding: 8px; }\n  .item { width: 110px; height: 40px; background: #f39c12; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 6px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='container'>\n  \u003Cdiv class='item'>1\u003C\u002Fdiv>\u003Cdiv class='item'>2\u003C\u002Fdiv>\n  \u003Cdiv class='item'>3\u003C\u002Fdiv>\u003Cdiv class='item'>4\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>align-content spaces out the \u003Cb>lines\u003C\u002Fb>. Try center, flex-start, flex-end, stretch.\u003C\u002Fp>",{"id":870,"language":16,"code":871,"is_editable":856},686,"\u003Cstyle>\n  body { margin: 0; font-family: sans-serif; }\n  .nav { display: flex; align-items: center; gap: 14px; background: #2c3e50; color: #fff; padding: 12px 18px; }\n  .nav a { color: #ecf0f1; text-decoration: none; }\n  .push { margin-left: auto; background: #e74c3c; padding: 8px 14px; border-radius: 6px; }\n\u003C\u002Fstyle>\n\u003Cnav class='nav'>\n  \u003Cstrong>Logo\u003C\u002Fstrong>\n  \u003Ca href='#'>Home\u003C\u002Fa>\n  \u003Ca href='#'>Courses\u003C\u002Fa>\n  \u003Ca class='push' href='#'>Login\u003C\u002Fa>\n\u003C\u002Fnav>\n\u003Cp style='padding:0 18px'>margin-left: auto absorbs all free space on the main axis.\u003C\u002Fp>",{"id":873,"language":16,"code":874,"is_editable":856},687,"\u003Cstyle>\n  \u002F* Open DevTools, inspect .toolbar and click the flex badge to see the overlay *\u002F\n  body { font-family: sans-serif; }\n  .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; background: #ecf0f1; border: 2px solid #bdc3c7; }\n  .toolbar button { padding: 10px 16px; border: 0; border-radius: 6px; background: #3498db; color: #fff; cursor: pointer; }\n  .toolbar .grow { flex: 1; background: #fff; padding: 10px; border: 1px solid #bdc3c7; border-radius: 6px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='toolbar'>\n  \u003Cbutton>Back\u003C\u002Fbutton>\n  \u003Cdiv class='grow'>Flexible area (flex: 1)\u003C\u002Fdiv>\n  \u003Cbutton>Save\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\u003Cp>Right-click the toolbar, choose Inspect, click the flex badge, then try the flexbox editor icon next to \u003Ccode>display: flex\u003C\u002Fcode>.\u003C\u002Fp>",[876,883],{"id":877,"title":878,"slug":879,"prompt":880,"starter_code":881,"expected_output":882,"language":16,"order_index":23},235,"Center a Column Layout","flexbox-center-column-layout","The three buttons should be stacked vertically in the middle of the 300px tall panel, and horizontally centered. Only edit the CSS for .panel. Remember: in a column layout, justify-content works vertically and align-items works horizontally.","\u003Cstyle>\n  .panel { height: 300px; background: #ecf0f1; display: flex; }\n  .panel button { padding: 10px 18px; margin: 4px 0; }\n\u003C\u002Fstyle>\n\u003Cdiv class='panel'>\n  \u003Cbutton>One\u003C\u002Fbutton>\n  \u003Cbutton>Two\u003C\u002Fbutton>\n  \u003Cbutton>Three\u003C\u002Fbutton>\n\u003C\u002Fdiv>","Three buttons stacked vertically, centered horizontally and vertically inside the panel.",{"id":884,"title":885,"slug":886,"prompt":887,"starter_code":888,"expected_output":889,"language":16,"order_index":12},236,"Logo Left, Actions Right with Auto Margin","flexbox-logo-left-actions-right","Make .header a flex container with vertically centered items. Keep the logo on the left and push the Login and Register buttons to the far right using margin-left: auto on a single element (do not use justify-content: space-between).","\u003Cstyle>\n  .header { background: #2c3e50; color: #fff; padding: 14px 20px; font-family: sans-serif; }\n  .header button { padding: 8px 14px; margin-left: 8px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='header'>\n  \u003Cspan class='logo'>Logo\u003C\u002Fspan>\n  \u003Cbutton>Login\u003C\u002Fbutton>\n  \u003Cbutton>Register\u003C\u002Fbutton>\n\u003C\u002Fdiv>","Logo on the far left, both buttons grouped on the far right, everything vertically centered.","2026-10-01T16:23:43+00:00",{"id":383,"slug":385,"title":384},{"id":395,"slug":397,"title":396}]