{"id":305346,"date":"2020-03-18T07:13:38","date_gmt":"2020-03-18T14:13:38","guid":{"rendered":"https:\/\/css-tricks.com\/?p=305346"},"modified":"2020-03-18T07:13:39","modified_gmt":"2020-03-18T14:13:39","slug":"flexbox-and-absolute-positioning","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/flexbox-and-absolute-positioning\/","title":{"rendered":"Flexbox and absolute positioning"},"content":{"rendered":"\n

Chen Hui Jing notes<\/a> that when you absolutely position a flex item, it’s no longer part of the flex layout. Except… it kinda is a little bit. If you make the child position: absolute;<\/code> but don’t apply any top\/right\/bottom\/left properties, then flexbox alignment will still apply to it<\/a>. <\/p>\n\n\n\n

It’s odd to see, but it makes a certain sort of sense as well. When you apply position: absolute;<\/code> to things (and nothing else), they kinda just stay where they are until you apply other positioning. Check out how this SVG icon just sits in the middle of this paragraph<\/a>, and even flows with it on resize, because it doesn’t have any specific positioning instructions other than to not affect anything else.<\/p>\n","protected":false},"excerpt":{"rendered":"

Chen Hui Jing notes that when you absolutely position a flex item, it’s no longer part of the flex layout. Except… it kinda is a little bit. If you make the child position: absolute; but don’t apply any top\/right\/bottom\/left properties, then flexbox alignment will still apply to it. It’s odd to see, but it makes […]<\/p>\n","protected":false},"author":3,"featured_media":305349,"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":[17],"tags":[9704,532],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/chenhuijing-mental-model.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":22077,"url":"https:\/\/css-tricks.com\/replicating-google-hangouts-chat\/","url_meta":{"origin":305346,"position":0},"title":"Replicating Some Of Google Hangouts Chat Design","date":"June 19, 2013","format":false,"excerpt":"I've been using Google Hangouts a bunch. It's really pretty great. One on one or group text chat, audio, or video. Text is archived, maintains history, and is searchable. Video \/ audio is recordable. It works great on desktop and mobile devices and keeps them in sync. It's free. Hard\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":289112,"url":"https:\/\/css-tricks.com\/grid-content-re-ordering-and-accessibility\/","url_meta":{"origin":305346,"position":1},"title":"Grid, content re-ordering and accessibility","date":"June 12, 2019","format":false,"excerpt":"Take this: Get hungry Order pizza Eat pizza That HTML ends up in the DOM that way (and thus how it is is exposed to assistive technology), and by default, those list items are also visually shown in that order. In most layout situations, the visual order will match that\u2026","rel":"","context":"In "Link"","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":198099,"url":"https:\/\/css-tricks.com\/left-and-right\/","url_meta":{"origin":305346,"position":2},"title":"Left Half and Right Half Layout – Many Different Ways","date":"March 17, 2015","format":false,"excerpt":"A whole bunch of years ago, we posted on this idea here on CSS-Tricks. We figured it was about time to update that and do the subject justice. Imagine a scenario where you need to split a layout in half. Content on the left and content on the right. Basically\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":153033,"url":"https:\/\/css-tricks.com\/arranging-elements-top-bottom-instead-left-right-float\/","url_meta":{"origin":305346,"position":3},"title":"Arranging Elements from Top to Bottom instead of Left to Right (float: down?)","date":"October 15, 2013","format":false,"excerpt":"Reader Marcin A wrote in with this question about a simple unordered list in which they wanted the elements to be arranged in vertical order (top to bottom) instead of horizontal (left to right). So markup like: 1 2 3 4 5 6 Which would end up like: 1 4\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":305346,"position":4},"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":181375,"url":"https:\/\/css-tricks.com\/centering-css-complete-guide\/","url_meta":{"origin":305346,"position":5},"title":"Centering in CSS: A Complete Guide","date":"September 2, 2014","format":false,"excerpt":"Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/guide-centering.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/305346"}],"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=305346"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/305346\/revisions"}],"predecessor-version":[{"id":305350,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/305346\/revisions\/305350"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/305349"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=305346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=305346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=305346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}