{"id":299018,"date":"2019-11-26T16:34:40","date_gmt":"2019-11-26T23:34:40","guid":{"rendered":"https:\/\/css-tricks.com\/?p=299018"},"modified":"2021-02-03T16:00:36","modified_gmt":"2021-02-04T00:00:36","slug":"the-thought-process-behind-a-flexbox-layout","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-thought-process-behind-a-flexbox-layout\/","title":{"rendered":"The Thought Process Behind a Flexbox Layout"},"content":{"rendered":"\n

I just need to put two boxes side-by-side and I hear flexbox is good at stuff like that.<\/p>\n\n\n\n

\"\"
Just adding display: flex;<\/code> to the parent element lays out the children in a row.<\/figcaption><\/figure>\n\n\n\n

Well, that’s cool. I guess I could have floated them, but this is easier.<\/p>\n\n\n\n

They should probably take up the full space they have though. Can I just stretch the parent to 100% wide? Well, I can, but that’s apparently not going to affect the child elements.<\/p>\n\n\n\n

\"\"
If the parent element has more space than the children need, it doesn’t do anything to help the children fill the space alone.<\/figcaption><\/figure>\n\n\n\n

Maybe I can use width: 50%;<\/code> on the children? That works, but I thought the point of flexbox is that you don’t have to be<\/em> all specific about width. Ah yes, flexbox has all of these ways of expressing the growy-shrinky-initial behavior of children. Looks like flex: 1;<\/code> is about as easy as it gets here.<\/p>\n\n\n\n

\"\"
Applying flex: 1;<\/code> to the children allow them to grow and fill the space.<\/figcaption><\/figure>\n\n\n\n

I like how I haven’t had to do any math or hard code values so far. Can I make it a three-up pattern without touching CSS?<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nice.<\/p>\n\n\n\n

Hmmm, wait. The sizing is a bit, uhhhh, flexy? Nothing is forcing these boxes to be one-third of the container all the time.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Looks like flex-basis: 33%<\/code> doesn’t fix this. flex: 0 0 33%;<\/code> also doesn’t do the trick. Looks like width: 33%; flex-shrink: 0;<\/code> does though, if we’re really wanting to strongarm it.<\/p>\n\n\n\n

\"\"
Sometimes a design calls for exactly equal size boxes. This is maybe CSS Grid territory, but whatever.<\/figcaption><\/figure>\n\n\n\n

The long word forcing that sizing behavior at narrow widths is perhaps an uncommon scenario. We could have also solved it with word-break: break-word; hyphens: auto;<\/code> on the child.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Another thing we could do is just let the dang items wrap instead of being so strict about it. Flexbox can do that, right?<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Oh hey, that reminds me how cool it is that those first two items are the same height. That’s the default stretch<\/code> behavior, but it can be controlled as well. And it’s by row, which is why the second row has its own different height.<\/p>\n\n\n\n

What if I want that first “Love” block to be on top instead? Looks like I can re-order it, eh? Let’s see, the default order is 0, so to be first, I do order: -1;<\/code>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ha! That kinda worked. But I meant that I want it to take up the full width on the top row. I guess I can just kick it up to flex-basis: 100%;<\/code> and the others will wrap accordingly.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

It’s pretty weird to have the source order and visual order different like this. Maybe that should go in the “don’t ever do this”<\/em> category.<\/p>\n\n\n\n

What if I wanna bail on the whole flexbox thing at a certain point? Part of me wants to change the direction to go vertical with flex-direction: column;<\/code> and force the children to be full-width. Ah, a simple display: block;<\/code> on the parent does that in one swoop.<\/p>\n\n\n\n

\"\"
Rather than changing all the flexbox stuff to handle a column layout, we just turn flexbox off.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n

Flexbox can do way more stuff! One of my favorites is how auto margins work to “push” other elements away when there is space. This is just one little journey playing with some UI<\/abbr> and seeing the useful things flexible does along with things that can make it confusing.<\/p>\n","protected":false},"excerpt":{"rendered":"

I just need to put two boxes side-by-side and I hear flexbox is good at stuff like that. Well, that’s cool. I guess I could have floated them, but this is easier. They should probably take up the full space they have though. Can I just stretch the parent to 100% wide? Well, I can, […]<\/p>\n","protected":false},"author":3,"featured_media":299198,"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],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/layouts-flexbox.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":310085,"url":"https:\/\/css-tricks.com\/chromium-lands-flexbox-gap\/","url_meta":{"origin":299018,"position":0},"title":"Chromium lands Flexbox gap","date":"May 8, 2020","format":false,"excerpt":"I mentioned this the other day via Michelle Barker's coverage, but here I'll link to the official announcement. The main thing is that we'll be getting gap with flexbox, which means: .flex-parent { display: flex; gap: 1rem; } .flex-child { flex: 1; } That's excellent, as putting space in between\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/bricks-with-gaps.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":281193,"url":"https:\/\/css-tricks.com\/quick-whats-the-difference-between-flexbox-and-grid\/","url_meta":{"origin":299018,"position":1},"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":317516,"url":"https:\/\/css-tricks.com\/using-flexbox-and-text-ellipsis-together\/","url_meta":{"origin":299018,"position":2},"title":"Using Flexbox and text ellipsis together","date":"July 21, 2020","format":false,"excerpt":"You can truncate a single line of text with an ellipsis (...) fairly easily with text-overflow and a few friends. But, as you might expect, that truncation happens at the end of the line of text. What if you want to truncate content in the middle? Leonardo Faria details good\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/files-ellipsis.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":241496,"url":"https:\/\/css-tricks.com\/flexbox-truncated-text\/","url_meta":{"origin":299018,"position":3},"title":"Flexbox and Truncated Text","date":"May 11, 2016","format":false,"excerpt":"Situation: you have a single line of text in a flex child element. You don't want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). But the worst happens. The unthinkable! The layout breaks and forces the entire flex parent element\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":161433,"url":"https:\/\/css-tricks.com\/boxes-fill-height-dont-squish\/","url_meta":{"origin":299018,"position":4},"title":"Boxes That Fill Height (Or More) (and Don’t Squish)","date":"January 30, 2014","format":false,"excerpt":"It's hard to sum up all the awesome that is flexbox in a little ol' blog post. Although we gave it a shot here. Here, let's just try and focus on one thing that flexbox solves very nicely: the ability to have an arbitrary set of boxes fill up all\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":165310,"url":"https:\/\/css-tricks.com\/filling-space-last-row-flexbox\/","url_meta":{"origin":299018,"position":5},"title":"Filling the Space in the Last Row with Flexbox","date":"March 10, 2014","format":false,"excerpt":"Chris Albrecht posted a question on StackOverflow about grids. Essentially: imagine you have an element with an unknown number of children. Each of those children is some percentage of the width of parent such that they make equal rows, like 25% wide each for four columns, 33.33% wide each for\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299018"}],"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=299018"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299018\/revisions"}],"predecessor-version":[{"id":333962,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/299018\/revisions\/333962"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/299198"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=299018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=299018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=299018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}