[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-1-en-105":3,"doc-seo-571926-105":53,"doc-detail-571926-en":126},{"code":4,"msg":5,"data":6},0,"success",[7,14,19,24,29,34,39,44,49],{"id":8,"doc_module":9,"doc_module_name":10,"category_name":11,"show_sort_weight":12,"slug":13},11,1,"Template","Presentations",90,"presentations",{"id":15,"doc_module":9,"doc_module_name":10,"category_name":16,"show_sort_weight":17,"slug":18},12,"Resumes",80,"resumes",{"id":20,"doc_module":9,"doc_module_name":10,"category_name":21,"show_sort_weight":22,"slug":23},14,"Invoices",70,"invoices",{"id":25,"doc_module":9,"doc_module_name":10,"category_name":26,"show_sort_weight":27,"slug":28},15,"Posters",60,"posters",{"id":30,"doc_module":9,"doc_module_name":10,"category_name":31,"show_sort_weight":32,"slug":33},16,"Social Media",50,"social-media",{"id":35,"doc_module":9,"doc_module_name":10,"category_name":36,"show_sort_weight":37,"slug":38},17,"Forms",40,"forms",{"id":40,"doc_module":9,"doc_module_name":10,"category_name":41,"show_sort_weight":42,"slug":43},18,"Letters",30,"letters",{"id":45,"doc_module":9,"doc_module_name":10,"category_name":46,"show_sort_weight":47,"slug":48},21,"Paper Templates",5,"papers-templates",{"id":50,"doc_module":9,"doc_module_name":10,"category_name":51,"show_sort_weight":4,"slug":52},158,"General","general-158",{"code":4,"msg":54,"data":55},"ok",{"site_id":56,"language":57,"slug":58,"title":59,"keywords":60,"description":61,"schema_data":62,"social_meta":119,"head_meta":121,"extra_data":123,"updated_unix":125},105,"en","css-flexbox-grid-master-reference-section-1-introduction-core-concepts","CSS Flexbox & Grid - Master Reference - Section 1 - Introduction & Core Concepts","","A visual, reference-style guide to modern CSS layout techniques using Flexbox and CSS Grid. It explains the conceptual mental models of 1-D (Flexbox) versus 2-D (Grid) layout, then details core container properties such as flex-direction, flex-wrap, justification along the main axis, alignment along the cross axis, and multi-line alignment. The guide also covers key flex item properties like flex-grow, flex-shrink, flex-basis, the flex shorthand, and ordering/alignment, plus real-world pattern examples.",{"@graph":63,"@context":118},[64,80,101],{"@type":65,"itemListElement":66},"BreadcrumbList",[67,71,74,77],{"item":68,"name":69,"@type":70,"position":9},"https://docshare.wps.com","Home","ListItem",{"item":72,"name":10,"@type":70,"position":73},"https://docshare.wps.com/template/",2,{"item":75,"name":11,"@type":70,"position":76},"https://docshare.wps.com/template/presentations/",3,{"item":78,"name":59,"@type":70,"position":79},"https://docshare.wps.com/template/css-flexbox-grid-master-reference-section-1-introduction-core-concepts/571926/",4,{"url":78,"name":59,"@type":81,"image":82,"author":87,"headline":59,"publisher":90,"fileFormat":93,"inLanguage":57,"description":61,"dateModified":94,"datePublished":95,"encodingFormat":93,"isAccessibleForFree":96,"interactionStatistic":97},"DigitalDocument",{"url":83,"@type":84,"width":85,"height":86},"https://docshare.wps.com/thumbnails/css-flexbox-grid-master-reference-section-1-introduction-core-concepts/571926.png","ImageObject",442,249,{"name":88,"@type":89},"PakDamar76","Person",{"url":68,"name":91,"@type":92},"DocShare","Organization","application/pdf","2026-10-20","2026-10-13",true,{"@type":98,"interactionType":99,"userInteractionCount":47},"InteractionCounter",{"@type":100},"ViewAction",{"@type":102,"mainEntity":103},"FAQPage",[104,110,114],{"name":105,"@type":106,"acceptedAnswer":107},"How do Flexbox and CSS Grid differ in layout behavior?","Question",{"text":108,"@type":109},"Flexbox is 1-dimensional, controlling items along a single axis (row or column). CSS Grid is 2-dimensional, positioning items across rows and columns simultaneously.","Answer",{"name":111,"@type":106,"acceptedAnswer":112},"Which Flexbox property controls alignment along the main axis?",{"text":113,"@type":109},"justify-content controls main-axis alignment and distributes items along the main axis.",{"name":115,"@type":106,"acceptedAnswer":116},"What do flex-grow, flex-shrink, and flex-basis control?",{"text":117,"@type":109},"flex-grow determines how items expand into available space, flex-shrink controls shrinking behavior below the basis, and flex-basis sets the initial size before free space is distributed.","https://schema.org",{"og:url":78,"og:type":120,"og:title":59,"og:site_name":91,"og:description":61},"article",{"robots":122,"canonical":78},"index,follow",{"doc_id":124,"site_id":56},571926,1792360155,{"code":4,"msg":5,"data":127},{"doc_id":124,"user_id":128,"nickname":88,"user_avatar":129,"doc_module":9,"category_id":8,"category_name":11,"doc_title":59,"doc_description":61,"doc_content":130,"file_id":131,"file_url":132,"file_type":133,"file_size":134,"view_count":47,"is_deleted":4,"is_public":9,"is_downloadable":9,"audit_status":9,"page_count":135,"language":136,"language_code":57,"site_id":56,"html_lang":57,"table_of_contents":137,"faqs":138,"seo_title":139,"seo_description":61,"update_tm":140,"read_time":141},962090893057,"https://ap-avatar.wpscdn.com/davatar_155a257f0dc6eb9ab79c44ca47cae57d","CSS FLEXBOX  \n& GRID  \nThe Complete Visual Reference Guide  \nFlexbox · Grid · Responsive Design · Real-World Patterns  \n[FreeTechLearner.com](FreeTechLearner.com)  \n[https://freetechlearner.com/](https://freetechlearner.com/)  \nCSS Flexbox & Grid—Master Reference [FreeTechLearner.com](FreeTechLearner.com)  \nSECTION 1 · Introduction & Core Concepts  \nWhat Are Flexbox and Grid?  \nBefore Flexbox and Grid, CSS layouts relied on floats, tables, and inline-block hacks—all fragile and hard to maintain. Flexbox (2012) and CSS Grid (2017) changed everything, giving us powerful, intuitive tools for modern layouts.  \nThe Mental Model  \nFlexbox = 1-Dimensional—Controls items along a single axis (row OR column) . CSS Grid = 2-Dimensional—Controls items across rows AND columns simultaneously.  \nKey Terminology  \n\n| Term | Flexbox | CSS Grid |\n| --- | --- | --- |\n| Enable | display: flex | display: grid |\n| Items | Direct children become flex items | Direct children become grid items |\n| Main Axis | Primary direction (row/column) | N/A—has both rows & columns |\n| Cross Axis | Perpendicular to main axis | N/A |\n| Tracks | N/A | Rows and columns |\n| Lines | N/A | Numbered grid lines |\n| Areas | N/A | Named regions via grid-template-areas |\n\n■ Use Flexbox for components (nav, buttons, cards) and Grid for page-level structure.  \n© [FreeTechLearner.com | freetechlearner.com](FreeTechLearner.com | freetechlearner.com) Page 2  \nCSS Flexbox & Grid—Master Reference [FreeTechLearner.com](FreeTechLearner.com)  \nSECTION 2 · Flexbox Deep Dive  \n2.1 Understanding the Axes  \nEvery Flexbox layout has two axes: the main axis (set by flex-direction) and the cross axis (perpendicular to main) . All alignment properties reference these two axes.  \nflex-direction: row → Main axis = horizontal, Cross axis = vertical flex-direction: column → Main axis = vertical, Cross axis = horizontal  \n2.2 Container Properties  \nflex-direction  \n.container {  \nflex-direction: row; /* Default — left to right */ flex-direction: row-reverse; /* Right to left */  \nflex-direction: column; /* Top to bottom */  \nflex-direction: column-reverse; /* Bottom to top */}  \nflex-wrap  \n.container {  \nflex-wrap: nowrap; /* Default — all in one line (may overflow) */  \nflex-wrap: wrap; /* Items wrap onto multiple lines */  \nflex-wrap: wrap-reverse; /* Items wrap in reverse */}  \njustify-content—Main Axis Alignment  \nThis is the most-used Flexbox property. It distributes items along the main axis.  \n.container {  \njustify-content: flex-start; /* Items at start (default) */  \njustify-content: flex-end; /* Items at end */  \njustify-content: center; /* Items in center */  \njustify-content: space-between; /* Equal gap between items */ justify-content: space-around; /* Equal space around items */ justify-content: space-evenly; /* Equal gap everywhere */  \n© [FreeTechLearner.com | freetechlearner.com](FreeTechLearner.com | freetechlearner.com) Page 3  \nCSS Flexbox & Grid—Master Reference [FreeTechLearner.com](FreeTechLearner.com)  \n}  \nalign-items—Cross Axis Alignment  \n.container {  \nalign-items: stretch; /* Default — items fill container height */  \nalign-items: flex-start; /* Items at top */  \nalign-items: flex-end; /* Items at bottom */  \nalign-items: center; /* Items centered vertically */  \nalign-items: baseline; /* Items aligned by text baseline */}  \nalign-content—Multi-line Alignment  \nWorks only when flex-wrap: wrap and there are multiple lines.  \n.container {  \nalign-content: flex-start | flex-end | center | space-between | space-around | stretch;  \n}  \ngap  \n.container {  \ngap: 20px; /* Row AND column gaps */  \nrow-gap: 10px; /* Only between rows */ column-gap: 20px; /* Only between columns */}  \n© [FreeTechLearner.com | freetechlearner.com](FreeTechLearner.com | freetechlearner.com) Page 4  \nCSS Flexbox & Grid—Master Reference [FreeTechLearner.com](FreeTechLearner.com)  \n2.3 Item (Child) Properties  \nflex-grow—Growing into Available Space  \n.item { flex-grow: 0; } /* Default — does NOT gr","cbCaioAbxTbwkI8l","https://ap.wps.com/l/cbCaioAbxTbwkI8l","pdf",47360,24,"English","# SECTION 1 · Introduction & Core Concepts\n## What Are Flexbox and Grid?\n## The Mental Model\n## Key Terminology\n# SECTION 2 · Flexbox Deep Dive\n## Understanding the Axes\n## Container Properties\n## Item (Child) Properties\n## Flexbox Layout Patterns","[{\"question\":\"How do Flexbox and CSS Grid differ in layout behavior?\",\"answer\":\"Flexbox is 1-dimensional, controlling items along a single axis (row or column). CSS Grid is 2-dimensional, positioning items across rows and columns simultaneously.\"},{\"question\":\"Which Flexbox property controls alignment along the main axis?\",\"answer\":\"justify-content controls main-axis alignment and distributes items along the main axis.\"},{\"question\":\"What do flex-grow, flex-shrink, and flex-basis control?\",\"answer\":\"flex-grow determines how items expand into available space, flex-shrink controls shrinking behavior below the basis, and flex-basis sets the initial size before free space is distributed.\"}]","CSS Flexbox & Grid - Master Reference - Section 1 - Introduction & Core Concepts | PDF",1791924480,8]