{"id":28818,"date":"2016-12-28T21:01:12","date_gmt":"2016-12-28T13:01:12","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28818"},"modified":"2018-04-09T16:56:15","modified_gmt":"2018-04-09T08:56:15","slug":"flexbox-patterns","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/","title":{"rendered":"Flexbox Patterns: The Ultimate CSS Flexbox Code Library"},"content":{"rendered":"<p>The newest CSS <a href=\"https:\/\/www.hongkiat.com\/blog\/ui-design-an-intro-to-flexible-box\/\">flexbox<\/a> property has radically changed the way developers create interfaces. No more floats and CSS hacks to get layouts aligned perfectly. No more worrying about custom responsive techniques for handling multi-columned layouts.<\/p>\n<p>But even though flexbox solves many problems it\u2019s also complicated to learn. To help you get started there\u2019s a new online library called <a target=\"_blank\" href=\"https:\/\/flexboxpatterns.com\/\">Flexbox Patterns<\/a> that catalogs many different flexbox elements into one central location.<\/p>\n<figure><a target=\"_blank\" href=\"https:\/\/flexboxpatterns.com\/\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flexbox-patterns\/01-flexbox-patterns-homepage.jpg\" alt=\"flexbox patterns homepage\"><\/a><\/figure>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/ui-design-an-intro-to-flexible-box\/\">Understanding Flexbox: A Modern Approach to UI Design<\/a>\n\t\t\t\t<\/p>\n<p>This library is completely free to use and it\u2019s open sourced <a target=\"_blank\" href=\"https:\/\/github.com\/cjcenizal\/flexbox-patterns\">on GitHub<\/a>. All the examples can be <strong>downloaded locally through NPM<\/strong> or <strong>through GitHub<\/strong>. But you can also browse the examples through the website to copy and paste codes as needed.<\/p>\n<p>Each pattern has its own page with a brief description and code samples. You can quite literally <strong>copy and paste the codes into your existing web project<\/strong>, although it\u2019s recommended that you first learn a little about what the code does and why you\u2019re using it.<\/p>\n<p>Take for example the <a target=\"_blank\" href=\"https:\/\/flexboxpatterns.com\/site-header\">site header bar<\/a> demo using flexbox to align all the elements in a top navbar side-by-side.<\/p>\n<figure><a target=\"_blank\" href=\"https:\/\/flexboxpatterns.com\/site-header\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flexbox-patterns\/02-flexbox-patterns-css-syntax.jpg\" alt=\"flexbox patterns demo\"><\/a><\/figure>\n<p>Typically this would require floats and a <a target=\"_blank\" href=\"https:\/\/stackoverflow.com\/\/q\/9543541\/477958\" rel=\"nofollow\">clearfix class<\/a> to get everything aligned properly.<\/p>\n<p>With flexbox you can hold everything in one container using the <strong>display: flex<\/strong> property. This way you can <strong>define how the elements should interact<\/strong> with each other and how the flexbox <strong>should operate on smaller screens<\/strong>.<\/p>\n<p>The patterns are consistently being updated and the current library focuses on the most common elements like <a target=\"_blank\" href=\"https:\/\/flexboxpatterns.com\/tabs\">tabs<\/a>, <a target=\"_blank\" href=\"https:\/\/flexboxpatterns.com\/side-bar\">sidebars<\/a>, and <a target=\"_blank\" href=\"https:\/\/flexboxpatterns.com\/centered-prompt\">vertical\/horizontal centering<\/a>.<\/p>\n<p>If you\u2019re brand new to flexbox then definitely check out <a target=\"_blank\" href=\"https:\/\/flexboxpatterns.com\/\">Flexbox Patterns<\/a>. The site won\u2019t teach you all the basics of flexbox but it will offer real-world examples you can tinker with for your own web projects.<\/p>","protected":false},"excerpt":{"rendered":"<p>The newest CSS flexbox property has radically changed the way developers create interfaces. No more floats and CSS hacks to get layouts aligned perfectly. No more worrying about custom responsive techniques for handling multi-columned layouts. But even though flexbox solves many problems it\u2019s also complicated to learn. To help you get started there\u2019s a new&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[507,4109],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Flexbox Patterns: The Ultimate CSS Flexbox Code Library - Hongkiat<\/title>\n<meta name=\"description\" content=\"The newest CSS flexbox property has radically changed the way developers create interfaces. No more floats and CSS hacks to get layouts aligned perfectly.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flexbox Patterns: The Ultimate CSS Flexbox Code Library\" \/>\n<meta property=\"og:description\" content=\"The newest CSS flexbox property has radically changed the way developers create interfaces. No more floats and CSS hacks to get layouts aligned perfectly.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-28T13:01:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-09T08:56:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/flexbox-patterns\/01-flexbox-patterns-homepage.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flexbox-patterns\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flexbox-patterns\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Flexbox Patterns: The Ultimate CSS Flexbox Code Library\",\"datePublished\":\"2016-12-28T13:01:12+00:00\",\"dateModified\":\"2018-04-09T08:56:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flexbox-patterns\\\/\"},\"wordCount\":306,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flexbox-patterns\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/flexbox-patterns\\\/01-flexbox-patterns-homepage.jpg\",\"keywords\":[\"CSS\",\"CSS Frameworks\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flexbox-patterns\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flexbox-patterns\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flexbox-patterns\\\/\",\"name\":\"Flexbox Patterns: The Ultimate CSS Flexbox Code Library - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flexbox-patterns\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flexbox-patterns\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/flexbox-patterns\\\/01-flexbox-patterns-homepage.jpg\",\"datePublished\":\"2016-12-28T13:01:12+00:00\",\"dateModified\":\"2018-04-09T08:56:15+00:00\",\"description\":\"The newest CSS flexbox property has radically changed the way developers create interfaces. No more floats and CSS hacks to get layouts aligned perfectly.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flexbox-patterns\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flexbox-patterns\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flexbox-patterns\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/flexbox-patterns\\\/01-flexbox-patterns-homepage.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/flexbox-patterns\\\/01-flexbox-patterns-homepage.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flexbox-patterns\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flexbox Patterns: The Ultimate CSS Flexbox Code Library\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Flexbox Patterns: The Ultimate CSS Flexbox Code Library - Hongkiat","description":"The newest CSS flexbox property has radically changed the way developers create interfaces. No more floats and CSS hacks to get layouts aligned perfectly.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/","og_locale":"en_US","og_type":"article","og_title":"Flexbox Patterns: The Ultimate CSS Flexbox Code Library","og_description":"The newest CSS flexbox property has radically changed the way developers create interfaces. No more floats and CSS hacks to get layouts aligned perfectly.","og_url":"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-12-28T13:01:12+00:00","article_modified_time":"2018-04-09T08:56:15+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/flexbox-patterns\/01-flexbox-patterns-homepage.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Flexbox Patterns: The Ultimate CSS Flexbox Code Library","datePublished":"2016-12-28T13:01:12+00:00","dateModified":"2018-04-09T08:56:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/"},"wordCount":306,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/flexbox-patterns\/01-flexbox-patterns-homepage.jpg","keywords":["CSS","CSS Frameworks"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/","url":"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/","name":"Flexbox Patterns: The Ultimate CSS Flexbox Code Library - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/flexbox-patterns\/01-flexbox-patterns-homepage.jpg","datePublished":"2016-12-28T13:01:12+00:00","dateModified":"2018-04-09T08:56:15+00:00","description":"The newest CSS flexbox property has radically changed the way developers create interfaces. No more floats and CSS hacks to get layouts aligned perfectly.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/flexbox-patterns\/01-flexbox-patterns-homepage.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/flexbox-patterns\/01-flexbox-patterns-homepage.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/flexbox-patterns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Flexbox Patterns: The Ultimate CSS Flexbox Code Library"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7uO","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28818"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28818\/revisions"}],"predecessor-version":[{"id":41753,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28818\/revisions\/41753"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28818"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}