[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-1-en-105":3,"doc-seo-571928-105":53,"doc-detail-571928-en":127},{"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":120,"head_meta":122,"extra_data":124,"updated_unix":126},105,"en","flexbox-cheatsheet-css-layout-reference-guide","Flexbox Cheatsheet - CSS Layout Reference Guide","","This document serves as a comprehensive and concise CSS Flexbox cheatsheet, providing a quick reference for essential layout properties. It covers properties for both the flex container and flex items, including display modes, flex-flow direction and wrapping, justification and alignment options like justify-content, align-items, and align-content, as well as individual item controls such as order, flex-grow, flex-shrink, flex-basis, and align-self. This reference is designed to aid web developers in rapidly implementing responsive layouts by summarizing key syntax and default behaviors for CSS Flexible Box Module attributes, facilitating efficient styling and cross-browser component arrangement in modern web development projects.",{"@graph":63,"@context":119},[64,80,102],{"@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":51,"@type":70,"position":76},"https://docshare.wps.com/template/general/",3,{"item":78,"name":59,"@type":70,"position":79},"https://docshare.wps.com/template/flexbox-cheatsheet-css-layout-reference-guide/571928/",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/flexbox-cheatsheet-css-layout-reference-guide/571928.png","ImageObject",442,249,{"name":88,"@type":89},"kopisore","Person",{"url":68,"name":91,"@type":92},"DocShare","Organization","application/pdf","2026-10-25","2026-10-13",true,{"@type":98,"interactionType":99,"userInteractionCount":101},"InteractionCounter",{"@type":100},"ViewAction",7,{"@type":103,"mainEntity":104},"FAQPage",[105,111,115],{"name":106,"@type":107,"acceptedAnswer":108},"What are the primary display modes for a Flexbox container?","Question",{"text":109,"@type":110},"The primary display modes are 'display: flex' for block-level flex containers and 'display: inline-flex' for inline-level flex containers.","Answer",{"name":112,"@type":107,"acceptedAnswer":113},"How does flex-flow simplify container layout?",{"text":114,"@type":110},"The flex-flow property is a shorthand that combines flex-direction and flex-wrap into a single declaration to control the direction and wrapping behavior of flex items.",{"name":116,"@type":107,"acceptedAnswer":117},"What is the function of the flex property on a child item?",{"text":118,"@type":110},"The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis, which together determine how a flex item grows, shrinks, and occupies space relative to other items in the container.","https://schema.org",{"og:url":78,"og:type":121,"og:title":59,"og:site_name":91,"og:description":61},"article",{"robots":123,"canonical":78},"index,follow",{"doc_id":125,"site_id":56},571928,1792109509,{"code":4,"msg":5,"data":128},{"doc_id":125,"user_id":129,"nickname":88,"user_avatar":130,"doc_module":9,"category_id":50,"category_name":51,"doc_title":59,"doc_description":61,"doc_content":131,"file_id":132,"file_url":133,"file_type":134,"file_size":135,"view_count":101,"is_deleted":4,"is_public":9,"is_downloadable":9,"audit_status":9,"page_count":9,"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":4},962090880963,"https://ap-avatar.wpscdn.com/davatar_6f874abed73319feea01a86fa6f0fab8","Flex Container Flex Item  \ndisplay : flex;  \ndisplay: inline-flex;  \n| flex-flow : row nowrap; (flex-direction flex-wrap) |  |  |\n| --- | --- | --- |\n| flex-direction : row; \u003Cbr>flex-direction: row-reverse; \u003Cbr>flex-direction: column; \u003Cbr>flex-direction: column-reverse;  |  |  |\n| flex-wrap : | nowrap; | |\n| flex-wrap: | wrap; | |\n| flex-wrap: | wrap-reverse; | |\n| justify-content : flex-start ; \u003Cbr>justify-content: center; \u003Cbr>justify-content: flex-end;  justify-content: space-between;  justify-content: space-around;  |  |  |\n\nalign-items : stretch ;  \nalign-items: flex-start;  \nalign-items: center;  \nalign-items: flex-end;  \nalign-items: baseline;  \n| align-content : | stretch ; | |\n| --- | --- | --- |\n| align-content: | flex-start; | |\n| align-content: | center; | |\n| align-content: | flex-end; | |\n| align-content: | space-between; | |\n| align-content: | space-around; | |\n| place-content : center start;\u003Cbr>(align-content justify-content) |  |  |\n\norder : 0 ;  \n| flex : 0 1 auto; (flex-grow flex-shrink flex-basis) |  |  |\n| --- | --- | --- |\n| flex-grow : 0 ;\u003Cbr>flex-grow: 1; |  | \u003Cbr>|\n| flex-shrink : 0 ; |  | |\n| flex-shrink: 1; |  | |\n| flex-basis : | auto ; |  |\n|  | |  |\n| align-self : | auto ; |  |\n| align-self: | flex-start; \u003Cbr>\u003Cbr>|  |\n| align-self: | \u003Cbr>center;  |  |\n|  | |  |\n| align-self:\u003Cbr>align-self: | flex-end;\u003Cbr>baseline; | |\n| align-self: | stretch; | |\n\n[darekkay.com/](darekkay.com/)􀀁exbox-cheatsheet","cbCaihBnnzCDbG0q","https://ap.wps.com/l/cbCaihBnnzCDbG0q","pdf",221376,"English","# Flex Container Properties\n## Layout Directions and Alignment\n## Content Distribution and Wrapping\n# Flex Item Properties\n## Sizing and Alignment Control","[{\"question\":\"What are the primary display modes for a Flexbox container?\",\"answer\":\"The primary display modes are 'display: flex' for block-level flex containers and 'display: inline-flex' for inline-level flex containers.\"},{\"question\":\"How does flex-flow simplify container layout?\",\"answer\":\"The flex-flow property is a shorthand that combines flex-direction and flex-wrap into a single declaration to control the direction and wrapping behavior of flex items.\"},{\"question\":\"What is the function of the flex property on a child item?\",\"answer\":\"The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis, which together determine how a flex item grows, shrinks, and occupies space relative to other items in the container.\"}]","Flexbox Cheatsheet - CSS Layout Reference Guide | PDF",1791924485]