{"id":300845,"date":"2020-01-06T15:56:11","date_gmt":"2020-01-06T22:56:11","guid":{"rendered":"https:\/\/css-tricks.com\/?p=300845"},"modified":"2020-01-06T15:56:11","modified_gmt":"2020-01-06T22:56:11","slug":"how-auto-margins-work-in-flexbox","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-auto-margins-work-in-flexbox\/","title":{"rendered":"How Auto Margins Work in Flexbox"},"content":{"rendered":"

Robin has covered this before<\/a>, but I’ve heard some confusion about it in the past few weeks and saw another person take a stab at explaining it<\/a>, and I wanted to join the party. <\/p>\n

<\/p>\n

Say you have a flex container with some flex items inside that don’t fill the whole area<\/strong>.<\/p>\n

\n See the Pen
\n ZEYLVEX<\/a> by Chris Coyier (@chriscoyier<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n

Now I want to push that “Menu” item to the far right. That’s where auto margins come in. If I put a margin-left: auto;<\/code> on it, it’ll push as far away as it possibly can on that row.<\/p>\n

\n See the Pen
\n WNbRLbG<\/a> by Chris Coyier (@chriscoyier<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n

Actually, you might consider margin-inline-start: auto;<\/code> instead and start using logical properties<\/a> everywhere so that you’re all set should you need to change direction.<\/p>\n

\n See the Pen
\n gObgZpb<\/a> by Chris Coyier (@chriscoyier<\/a>)
\n on CodePen<\/a>.<\/span>\n<\/p>\n

Also, note that auto margins work in both directions as long as there is room to push. In this example, it’s not alignment that is moving the menu down, it’s an auto margin.<\/p>\n

\n See the Pen
\n XWJpobE<\/a> by Chris Coyier (@chriscoyier<\/a>)
\n on CodePen<\/a>.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

Robin has covered this before, but I’ve heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted to join the party.<\/p>\n","protected":false},"author":3,"featured_media":296211,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[532,1392],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/arrow-pattern.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":273764,"url":"https:\/\/css-tricks.com\/the-peculiar-magic-of-flexbox-and-auto-margins\/","url_meta":{"origin":300845,"position":0},"title":"The peculiar magic of flexbox and auto margins","date":"July 27, 2018","format":false,"excerpt":"In front-end development, there are often times when I know that I don\u2019t know something. I might know enough to know what CSS to search for, but I have absolutely no idea how to use it or what the right syntax is. Somehow, in my head, there appears to be\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/margin-auto-flex.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":282730,"url":"https:\/\/css-tricks.com\/ie10-compatible-grid-auto-placement-with-flexbox\/","url_meta":{"origin":300845,"position":1},"title":"IE10-Compatible Grid Auto-Placement with Flexbox","date":"February 18, 2019","format":false,"excerpt":"If you work on web applications that support older browsers, and have lusted after CSS Grid from the sidelines like I have, I have some good news: I've discovered a clever CSS-only way to use grid auto-placement in IE10+! Now, it's not actually CSS Grid, but without looking at the\u2026","rel":"","context":"In "Article"","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":242097,"url":"https:\/\/css-tricks.com\/couple-takes-sticky-footer\/","url_meta":{"origin":300845,"position":2},"title":"Sticky Footer, Five Ways","date":"May 25, 2016","format":false,"excerpt":"The purpose of a sticky footer is that it \"sticks\" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":281193,"url":"https:\/\/css-tricks.com\/quick-whats-the-difference-between-flexbox-and-grid\/","url_meta":{"origin":300845,"position":3},"title":"Quick! What’s the Difference Between Flexbox and Grid?","date":"February 12, 2019","format":false,"excerpt":"Let's go rapid fire and try to answer this question with quick points rather than long explanations. There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/unicode-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":299018,"url":"https:\/\/css-tricks.com\/the-thought-process-behind-a-flexbox-layout\/","url_meta":{"origin":300845,"position":4},"title":"The Thought Process Behind a Flexbox Layout","date":"November 26, 2019","format":false,"excerpt":"I just need to put two boxes side-by-side and I hear flexbox is good at stuff like that. Just adding display: flex; to the parent element lays out the children in a row. Well, that's cool. I guess I could have floated them, but this is easier. They should probably\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/layouts-flexbox.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":242476,"url":"https:\/\/css-tricks.com\/dont-overthink-flexbox-grids\/","url_meta":{"origin":300845,"position":5},"title":"Don’t Overthink It (Flexbox) Grids","date":"June 22, 2016","format":false,"excerpt":"Four years ago I posted \"Don't Overthink it Grids\" and it resonated with quite a few people. Even back then, I thought we might have been at Peak Grid. Someone was promoting a new grid framework practically every week. That article was my way of saying: \"Fear not! You can\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/arrow-pattern.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300845"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=300845"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300845\/revisions"}],"predecessor-version":[{"id":301437,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/300845\/revisions\/301437"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/296211"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=300845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=300845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=300845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}