[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-1-en-105":3,"doc-seo-571929-105":53,"doc-detail-571929-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","css-flexbox-cheat-sheet","CSS Flexbox - Cheat Sheet","","This CSS Flexbox Cheat Sheet provides a concise and comprehensive technical reference for web developers working with flexible box layouts. It outlines the essential container properties, including flex direction, wrapping, justification, and alignment, alongside critical flex item properties such as grow, shrink, basis, and individual alignment controls. The document serves as a quick-reference guide for modern responsive design implementations, enabling developers to efficiently manage layout structures and spacing. By summarizing key CSS attributes, the cheat sheet facilitates rapid application and troubleshooting of flexbox containers and their immediate children, ensuring optimal cross-browser display performance in complex web interfaces.",{"@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/css-flexbox-cheat-sheet/571929/",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-cheat-sheet/571929.png","ImageObject",442,249,{"name":88,"@type":89},"nayy☆","Person",{"url":68,"name":91,"@type":92},"DocShare","Organization","application/pdf","2026-10-24","2026-10-13",true,{"@type":98,"interactionType":99,"userInteractionCount":101},"InteractionCounter",{"@type":100},"ViewAction",6,{"@type":103,"mainEntity":104},"FAQPage",[105,111,115],{"name":106,"@type":107,"acceptedAnswer":108},"What does the display: flex property achieve?","Question",{"text":109,"@type":110},"Setting display: flex on an element makes all its immediate child elements behave as flex items, enabling the use of flexbox layout properties.","Answer",{"name":112,"@type":107,"acceptedAnswer":113},"How do flex-grow and flex-shrink differ?",{"text":114,"@type":110},"Flex-grow defines the ability of a flex item to expand to fill available space, while flex-shrink defines its ability to shrink if necessary to avoid overflow.",{"name":116,"@type":107,"acceptedAnswer":117},"What is the purpose of the flex-flow property?",{"text":118,"@type":110},"The flex-flow property is a shorthand that combines flex-direction and flex-wrap into a single declaration for more efficient code.","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},571929,1792123981,{"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},962090893153,"https://ap-avatar.wpscdn.com/davatar_9964176cb1d06d4a9deccf72a44ae3dc","css flex Cheat Sheet  \nby MrCoder (MrCoder) [via](via cheatography.com/30546/cs/12207/)[ cheatography.com/30546/cs/12207/](via cheatography.com/30546/cs/12207/)  \ncontainer properties  \ndisplay: flex | inline flex all immediate child will become flex  \nitems automatically.  \nflex-direction: row | row-reverse | column | column-reverse  \nflex-wrap: nowrap | wrap |  \nwrap-reverse  \nsingle lines or multiple lines  \nflex-flow: \u003Cflex-direction> \u003Cflex-wrap>  \njustify-content: flex-start | flex-end | center | space-between | space-‐ around  \nalign-items: stretch | flex-start | flex-end | center | baseline  \nalign-content: stretch | flex-start | flex-end | center | space-between | space-around  \nflex item properties  \norder: \u003Cinteger>  \nflex-grow: \u003Cnumber> force to fill container; 0 means remaining original size  \nflex-shrink: \u003Cnumber>  \nflex-basis: auto |\u003Cwidth>  \ninitial main size (width or height) of the flex item  \nflex: \u003Cflex-grow> \u003Cflex-shrink> \u003Cflex-basis>  \nalign-self: auto | flex-start | flex-end | center | baseline | stretch  \nBy MrCoder (MrCoder)  \n[cheatography.com/mrcoder/](cheatography.com/mrcoder/)  \nNot published yet.  \nLast updated 30th June , 2017. Page 1 of 1.  \nSponsored by Readable.com Measure your website readability!  \n[https://readable.com](https://readable.com)","cbCaioADSLngwOJe","https://ap.wps.com/l/cbCaioADSLngwOJe","pdf",25661,"English","# Container Properties\n## Item Properties","[{\"question\":\"What does the display: flex property achieve?\",\"answer\":\"Setting display: flex on an element makes all its immediate child elements behave as flex items, enabling the use of flexbox layout properties.\"},{\"question\":\"How do flex-grow and flex-shrink differ?\",\"answer\":\"Flex-grow defines the ability of a flex item to expand to fill available space, while flex-shrink defines its ability to shrink if necessary to avoid overflow.\"},{\"question\":\"What is the purpose of the flex-flow property?\",\"answer\":\"The flex-flow property is a shorthand that combines flex-direction and flex-wrap into a single declaration for more efficient code.\"}]","CSS Flexbox - Cheat Sheet | PDF",1791924488]