{"id":21085,"date":"2013-04-17T10:07:08","date_gmt":"2013-04-17T17:07:08","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=21085"},"modified":"2021-07-28T11:24:38","modified_gmt":"2021-07-28T18:24:38","slug":"align-content","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-content\/","title":{"rendered":"align-content"},"content":{"rendered":"\n<p>The&nbsp;<code>align-content<\/code>&nbsp;property is a sub-property of the&nbsp;<a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">Flexible Box Layout module<\/a>.<\/p>\n\n\n\n<p>It helps to align a flex container\u2019s lines within it when there is extra space in the cross-axis, similar to how&nbsp;<code>justify-content<\/code>&nbsp;aligns individual items within the main-axis.<\/p>\n\n\n\n<p><em>Note, this property has no effect when the flexbox has only a single line.<\/em><\/p>\n\n\n\n<p>The&nbsp;<code>align-content<\/code>&nbsp;property accepts 6 different values:<\/p>\n\n\n\n<ul><li><code>flex-start<\/code>: lines packed to the start of the container<\/li><li><code>flex-end<\/code>: lines packed to the end of the container<\/li><li><code>center<\/code>: lines packed to the center of the container<\/li><li><code>space-between<\/code>: lines evenly distributed; the first line is at the start of the container while the last one is at the end<\/li><li><code>space-around<\/code>: lines evenly distributed with equal space between them<\/li><li><code>stretch<\/code>&nbsp;(<strong>default<\/strong>): lines stretch to take up the remaining space<\/li><\/ul>\n\n\n\n<p>The following figure helps understand how the lines are stacked up in a flex container depending on the&nbsp;<code>align-content<\/code>&nbsp;value:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.w3.org\/TR\/css3-flexbox\/images\/align-content-example.svg\" alt=\"align-content\"\/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\"><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-content\/#syntax\"><\/a>Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">align-content: flex-start | flex-end | center | space-between | space-around | stretch\n\n.flex-container {\n  align-content: space-around;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\"><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-content\/#demo\"><\/a>Demo<\/h3>\n\n\n<p>The following demo shows how lines are stacked out depending on the&nbsp;<code>align-content<\/code>&nbsp;value:<\/p>\n\n\n\n<ul><li>The red list is set to&nbsp;<code>flex-start<\/code><\/li><li>The yellow list is set to&nbsp;<code>flex-end<\/code><\/li><li>The blue list is set to&nbsp;<code>center<\/code><\/li><li>The green list is set to&nbsp;<code>space-between<\/code><\/li><li>The pink list is set to&nbsp;<code>space-around<\/code><\/li><li>The brown list is set to&nbsp;<code>stretch<\/code><\/li><\/ul>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_1caa1ef0857a023d0561b5223abef75d\" src=\"\/\/codepen.io\/anon\/embed\/1caa1ef0857a023d0561b5223abef75d?height=450&amp;theme-id=1&amp;slug-hash=1caa1ef0857a023d0561b5223abef75d&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 1caa1ef0857a023d0561b5223abef75d\" title=\"CodePen Embed 1caa1ef0857a023d0561b5223abef75d\" 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\"><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-content\/#browser-support\"><\/a>Browser support<\/h3>\n\n\n<p>This is support for Flexbox as a whole, which should be the same as this property, since it&#8217;s kind of an <em>original<\/em> property as it were.<\/p>\n\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>For more information about how to mix syntaxes in order to get the best browser support, please refer to&nbsp;<a href=\"https:\/\/css-tricks.com\/using-flexbox\/\">this article (CSS-Tricks)<\/a>&nbsp;or&nbsp;<a href=\"https:\/\/dev.opera.com\/articles\/view\/advanced-cross-browser-flexbox\/#fallbacks\" rel=\"noopener\">this article (DevOpera)<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\"><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-content\/#other-resources\"><\/a>Other resources<\/h3>\n\n\n<ul><li><a href=\"https:\/\/www.w3.org\/TR\/css3-flexbox\/#align-content\" rel=\"noopener\"><code>align-items<\/code> in the spec<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/align-content\" rel=\"noopener\"><code>align-items<\/code> at MDN<\/a><\/li><li><a href=\"https:\/\/dev.opera.com\/articles\/view\/advanced-cross-browser-flexbox\/#fallbacks\" rel=\"noopener\">Advanced cross-browser flexbox<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">A 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","protected":false},"excerpt":{"rendered":"<p>The&nbsp;align-content&nbsp;property is a sub-property of the&nbsp;Flexible Box Layout module. It helps to align a flex container\u2019s lines within it when there is extra space in the cross-axis, similar to how&nbsp;justify-content&nbsp;aligns individual items within the main-axis. Note, this property has no effect when the flexbox has only a single line. The&nbsp;align-content&nbsp;property accepts 6 different values: flex-start: [&hellip;]<\/p>\n","protected":false},"author":248367,"featured_media":0,"parent":13712,"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":[5042,532],"acf":[],"jetpack-related-posts":[{"id":335691,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-self\/","url_meta":{"origin":21085,"position":0},"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":21085,"position":1},"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":[]},{"id":318980,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/gap\/","url_meta":{"origin":21085,"position":2},"title":"gap","date":"August 13, 2020","format":false,"excerpt":"The gap property in CSS is a shorthand for row-gap and column-gap, specifying the size of gutters, which is the space between rows and columns within grid, flex, and multi-column layouts. \/* Grid layout *\/ .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; }\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/image.jpeg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":343682,"url":"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/","url_meta":{"origin":21085,"position":3},"title":"A Complete Guide to CSS Grid","date":"May 12, 2021","format":false,"excerpt":"Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.","rel":"","context":"In \"grid\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/grid-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336695,"url":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-self\/","url_meta":{"origin":21085,"position":4},"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":196786,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-align-last\/","url_meta":{"origin":21085,"position":5},"title":"text-align-last","date":"February 26, 2015","format":false,"excerpt":"text-align-last lets you control the alignment of the last (or only) line of text right before a forced line break \u2014 for example the end of a paragraph or the line right before a tag. .intro-graph { text-align-last: center; } At the time of this writing, only Mozilla browsers and\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21085"}],"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=21085"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21085\/revisions"}],"predecessor-version":[{"id":345543,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21085\/revisions\/345543"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13712"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=21085"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=21085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}