\n Chris Coyier <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n","protected":false},"excerpt":{"rendered":"The align-items property is related to CSS layout. It effects how elements are aligned both in Flexbox and Grid layouts. align-items in Flexbox align-items in Grid Syntax<\/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":[],"acf":[],"jetpack-related-posts":[{"id":335691,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-self\/","url_meta":{"origin":21073,"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":262713,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-items\/","url_meta":{"origin":21073,"position":1},"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":340540,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-content\/","url_meta":{"origin":21073,"position":2},"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":21208,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-self\/","url_meta":{"origin":21073,"position":3},"title":"align-self","date":"April 19, 2013","format":false,"excerpt":"The align-self property is a sub-property of the Flexible Box Layout module. It makes possible to override the align-items value for specific flex items. The align-self property accepts the same 5 values as the align-items: flex-start: cross-start margin edge of the item is placed on the cross-start line flex-end: cross-end\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21059,"url":"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/","url_meta":{"origin":21073,"position":4},"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":21085,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-content\/","url_meta":{"origin":21073,"position":5},"title":"align-content","date":"April 17, 2013","format":false,"excerpt":"The\u00a0align-content\u00a0property is a sub-property of the\u00a0Flexible 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\u00a0justify-content\u00a0aligns individual items within the main-axis. Note, this property has no effect when the flexbox has only a single line. The\u00a0align-content\u00a0property\u2026","rel":"","context":"In \"align-content\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21073"}],"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=21073"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21073\/revisions"}],"predecessor-version":[{"id":373940,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21073\/revisions\/373940"}],"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=21073"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=21073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}