\n Chris Coyier <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n","protected":false},"excerpt":{"rendered":"The flex-direction property is a sub-property of the Flexible Box Layout module. It establishes the main-axis, thus defining the direction flex items are placed in the flex container. Reminder: the main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends […]<\/p>\n","protected":false},"author":1888,"featured_media":0,"parent":13921,"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":21059,"url":"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/","url_meta":{"origin":21092,"position":0},"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":21097,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-wrap\/","url_meta":{"origin":21092,"position":1},"title":"flex-wrap","date":"April 17, 2013","format":false,"excerpt":"The flex-wrap property is a sub-property of the Flexible Box Layout Module. It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in,\u2026","rel":"","context":"With 32 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21073,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-items\/","url_meta":{"origin":21092,"position":2},"title":"align-items","date":"April 11, 2013","format":false,"excerpt":"The align-items property is related to CSS layout. It effects how elements are aligned both in Flexbox and Grid layouts. .container { display: flex; align-items: flex-start; } align-items in Flexboxalign-items in Grid Syntax align-items: flex-start | flex-end | center | baseline | stretch The align-items property defines the default behavior\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":336695,"url":"https:\/\/css-tricks.com\/almanac\/properties\/j\/justify-self\/","url_meta":{"origin":21092,"position":3},"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":318980,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/gap\/","url_meta":{"origin":21092,"position":4},"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":21085,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-content\/","url_meta":{"origin":21092,"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\/21092"}],"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\/1888"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=21092"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21092\/revisions"}],"predecessor-version":[{"id":346045,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21092\/revisions\/346045"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13921"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=21092"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=21092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}