{"id":21081,"date":"2013-04-17T10:19:35","date_gmt":"2013-04-17T17:19:35","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=21081"},"modified":"2022-09-22T12:03:22","modified_gmt":"2022-09-22T19:03:22","slug":"justify-content","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-content\/","title":{"rendered":"justify-content"},"content":{"rendered":"\n<p>The <code>justify-content<\/code> property is a sub-property of the <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">Flexible Box Layout module<\/a>.<\/p>\n\n\n\n<p>It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.<\/p>\n\n\n\n<p>The <code>justify-content<\/code> property accepts five different values:<\/p>\n\n\n\n<ul><li><code>flex-start<\/code> (<strong>default<\/strong>): items are packed toward the start line<\/li><li><code>flex-end<\/code>: items are packed toward to end line<\/li><li><code>center<\/code>: items are centered along the line<\/li><li><code>space-between<\/code>: items are evenly distributed in the line; first item is on the start line, last item on the end line<\/li><li><code>space-around<\/code>: items are evenly distributed in the line with equal space around them<\/li><li><code>space-evenly<\/code>: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same<\/li><\/ul>\n\n\n\n<p>The following figure helps understand what the <code>justify-content<\/code> property actually does:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/www.w3.org\/TR\/css3-flexbox\/images\/flex-pack.svg\" alt=\"justify-content\"\/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly\n\n.flex-item {\n  justify-content: center;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>The following demo shows how flex items behave depending on <code>justify-content<\/code> value:<\/p>\n\n\n\n<ul><li>The red list is set to <code>flex-start<\/code><\/li><li>The yellow is set to <code>flex-end<\/code><\/li><li>The blue is set to <code>center<\/code><\/li><li>The green is set to <code>space-between<\/code><\/li><li>The pink is set to <code>space-around<\/code><\/li><li>The light green is set to <code>space-evenly<\/code><\/li><\/ul>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zzJMGJ\" src=\"\/\/codepen.io\/anon\/embed\/zzJMGJ?height=450&amp;theme-id=1&amp;slug-hash=zzJMGJ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zzJMGJ\" title=\"CodePen Embed zzJMGJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=flexbox\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">21*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">28<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"IE - \"><span class=\"caniuse-agents-version version\">11<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">6.1*<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">4.4<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">7.0-7.1*<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n<p>Blackberry browser 10+ supports the new syntax.<\/p>\n\n\n\n<p>As of our latest December 2018 update, <code>justify-content: space-evenly;<\/code> is gaining support. There is a <a href=\"https:\/\/drafts.csswg.org\/css-align-3\/#valdef-align-content-space-evenly\" rel=\"noopener\">working draft spec<\/a> on it.<\/p>\n\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=justify-content-space-evenly\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">60<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">52<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">11<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">11.0-11.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n<p>For more informations about how to mix syntaxes in order to get the best browser support, please refer to our <a href=\"https:\/\/css-tricks.com\/using-flexbox\/\">&#8220;Using Flexbox&#8221; article <\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/www.w3.org\/TR\/css-flexbox-1\/#justify-content-property\" rel=\"noopener\">CSS Flexible Box Layout Module Level 1<\/a><\/li><li><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/css-align-justify?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_bestsellers\" rel=\"noopener\">How To Use CSS Grid to Justify and Align Content and Items<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">A Complete Guide to Flexbox<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/using-flexbox\/\">Using Flexbox<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/old-flexbox-and-new-flexbox\/\">Old Flexbox and new Flexbox<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-guides\">Related guides<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-21081\">\n\n  <time datetime=\"2013-04-08\" title=\"Originally published Apr 17, 2013\">\n    <strong>\n                \n      Snippet\n      <\/strong>\n\n    on\n\n    May 1, 2024  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">\n      A Complete Guide to Flexbox    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-21081\">\n\n  <time datetime=\"2021-05-12\" title=\"Originally published Apr 17, 2013\">\n    <strong>\n                \n      Snippet\n      <\/strong>\n\n    on\n\n    Feb 9, 2023  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\">\n      A Complete Guide to CSS Grid    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/caiman\/\" aria-label=\"Author page of Chris House\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/630a7407c7d243e025aed1a891f1aa41?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/630a7407c7d243e025aed1a891f1aa41?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/caiman\/\">\n      Chris House    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-21081\">\n\n  <time datetime=\"2014-09-02\" title=\"Originally published Apr 17, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 2, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/centering-css-complete-guide\/\">\n      Centering in CSS: A Complete Guide    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"related-tricks\">Related tricks!<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card article\" id=\"mini-post-21081\">\n\n  <time datetime=\"2018-04-05\" title=\"Originally published Apr 17, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Apr 5, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/a-quick-way-to-remember-difference-between-justify-content-align-items\/\">\n      A Quick Way to Remember the Difference Between `justify-content` and `align-items`    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-21081\">\n\n  <time datetime=\"2019-06-24\" title=\"Originally published Apr 17, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 24, 2019  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/building-a-conference-schedule-with-css-grid\/\">\n      Building a Conference Schedule with CSS Grid    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/mrwweb\/\" aria-label=\"Author page of Mark Root-Wiley\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1d4925cfe7b4025037be5038af7d4292?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1d4925cfe7b4025037be5038af7d4292?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/mrwweb\/\">\n      Mark Root-Wiley    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-21081\">\n\n  <time datetime=\"2018-06-20\" title=\"Originally published Apr 17, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 20, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/centering-the-newest-coolest-way-vs-the-oldest-coolest-way\/\">\n      Centering: The Newest Coolest Way vs. The Oldest Coolest Way    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-21081\">\n\n  <time datetime=\"2021-11-23\" title=\"Originally published Apr 17, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 7, 2022  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/control-layout-in-a-multi-directional-website\/\">\n      Control Layout in a Multi-Directional Website    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/abdelrahim\/\" aria-label=\"Author page of Alaa Abd El-Rahim\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/U0qllo8R_400x400.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/abdelrahim\/\">\n      Alaa Abd El-Rahim    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-21081\">\n\n  <time datetime=\"2018-01-04\" title=\"Originally published Apr 17, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jan 4, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/fun-times-sizing-grid-elements\/\">\n      Fun Times With Sizing Grid Elements    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-21081\">\n\n  <time datetime=\"2022-06-03\" title=\"Originally published Apr 17, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 3, 2022  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/please-give-me-some-space\/\">\n      Please Give Me Some Space    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The justify-content property is a sub-property of the Flexible Box Layout module. It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment [&hellip;]<\/p>\n","protected":false},"author":248367,"featured_media":0,"parent":13929,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":262713,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-items\/","url_meta":{"origin":21081,"position":0},"title":"place-items","date":"November 29, 2017","format":false,"excerpt":"The place-items property in CSS is shorthand for the align-items and justify-items properties, combining them into a single declaration. A common usage is doing horizontal and vertical centering with Grid: .center-inside-of-me { display: grid; place-items: center; } These properties have gained use with the introduction of Flexbox and Grid layouts,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":336695,"url":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-self\/","url_meta":{"origin":21081,"position":1},"title":"justify-self","date":"March 18, 2021","format":false,"excerpt":"The justify-self property in CSS sets the justification of an element within its containing block. Its behavior depends on the display of the containing block. For example, if the containing block is a grid container (i.e. display: grid), we can justify the element in it along the \"inline\" axis (which,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":21059,"url":"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/","url_meta":{"origin":21081,"position":2},"title":"A Complete Guide to Flexbox","date":"April 8, 2013","format":false,"excerpt":"Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.","rel":"","context":"In \"flexbox\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/guide-flexbox.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":326605,"url":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-items\/","url_meta":{"origin":21081,"position":3},"title":"justify-items","date":"December 2, 2020","format":false,"excerpt":"The justify-items property is a sub-property of the CSS Box Alignment Module which basically controls the alignment of grid items within their scope. .element { justify-items: center; } justify-items aligns grid items along the row (inline) axis. Specifically, this property allows you to set alignment for items inside a grid\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":335691,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-self\/","url_meta":{"origin":21081,"position":4},"title":"place-self","date":"March 2, 2021","format":false,"excerpt":"The place-self property in CSS is shorthand for the align-self and justify-self properties, combining them into a single declaration in CSS Grid and Flexbox layouts, where align-self and justify-self (CSS Grid only) are values that align an individual item in the block and inline directions. .element { place-self: center start;\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340540,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-content\/","url_meta":{"origin":21081,"position":5},"title":"place-content","date":"May 13, 2021","format":false,"excerpt":"The place-content property in CSS is shorthand for the align-content and justify-content properties, combining them into a single declaration in CSS Grid and Flexbox layouts, where align-content and justify-content are values that align an individual item in the block and inline directions. .element { display: flex; place-content: start space-evenly; }\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21081"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/248367"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=21081"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21081\/revisions"}],"predecessor-version":[{"id":373691,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21081\/revisions\/373691"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13929"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=21081"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=21081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}