Weeknotes 26:30
I was excited to find out that flex-wrap: balance dropped in Chrome last month. I added it to several layouts on the Revive Our Hearts site.
Jul 27, 20264 min read
flex-wrap: balance shipped in Chrome
<header>
<figure class="avatar"><img loading="lazy" decoding="async" width="48" height="48" src="https://jeffbridgforth.com/wp-content/uploads/una.jpg" class="attachment-full size-full" alt="" /></figure>
<div class="user-information">
<h2>Una Kravets</h2>
<p><a class="atmosphere-mention" href="https://bsky.app/profile/una.im">@una.im</a></p>
</div>
<svg title="Blue Sky" xmlns="http://www.w3.org/2000/svg" height="32px" fill="#166CFB" viewBox="0 0 512 512">
<path d="M 362.6666666666667 286.6666666666667 Q 361.77777777777777 286.6666666666667 361.77777777777777 286.6666666666667 L 361.77777777777777 286.6666666666667 L 361.77777777777777 286.6666666666667 Q 357.3333333333333 285.77777777777777 353.77777777777777 284.8888888888889 Q 356.44444444444446 285.77777777777777 358.22222222222223 285.77777777777777 Q 360 285.77777777777777 362.6666666666667 286.6666666666667 L 362.6666666666667 286.6666666666667 Z M 256 226.22222222222223 Q 237.33333333333334 189.77777777777777 196.44444444444446 140 L 196.44444444444446 140 L 196.44444444444446 140 Q 156.44444444444446 89.33333333333333 111.11111111111111 55.55555555555556 Q 69.33333333333333 27.11111111111111 48.888888888888886 25.333333333333332 Q 29.333333333333332 22.666666666666668 19.555555555555557 29.77777777777778 Q 7.111111111111111 36 3.5555555555555554 50.22222222222222 Q 0 64.44444444444444 0 76 Q 0 85.77777777777777 2.6666666666666665 115.11111111111111 Q 4.444444444444445 144.44444444444446 7.111111111111111 173.77777777777777 Q 10.666666666666666 204 13.333333333333334 214.66666666666666 Q 27.555555555555557 258.22222222222223 66.66666666666667 275.1111111111111 Q 104.88888888888889 291.1111111111111 149.33333333333334 286.6666666666667 Q 152 285.77777777777777 154.66666666666666 285.77777777777777 Q 156.44444444444446 285.77777777777777 158.22222222222223 284.8888888888889 Q 153.77777777777777 285.77777777777777 149.33333333333334 286.6666666666667 Q 106.66666666666667 292 75.55555555555556 307.1111111111111 Q 44.44444444444444 322.22222222222223 42.666666666666664 352.44444444444446 Q 41.77777777777778 383.55555555555554 88.88888888888889 437.77777777777777 Q 142.22222222222223 489.3333333333333 175.11111111111111 477.77777777777777 Q 208 466.22222222222223 227.55555555555554 424.44444444444446 Q 246.22222222222223 383.55555555555554 256 346.22222222222223 Q 256 346.22222222222223 256 345.3333333333333 Q 258.6666666666667 353.3333333333333 261.3333333333333 363.1111111111111 Q 270.22222222222223 399.55555555555554 286.22222222222223 435.1111111111111 Q 303.1111111111111 469.77777777777777 334.22222222222223 476.8888888888889 Q 366.22222222222223 484 421.3333333333333 437.77777777777777 Q 464.8888888888889 391.55555555555554 464.8888888888889 360.44444444444446 Q 464 328.44444444444446 434.6666666666667 310.6666666666667 Q 405.3333333333333 292 362.6666666666667 286.6666666666667 Q 361.77777777777777 286.6666666666667 361.77777777777777 285.77777777777777 Q 357.3333333333333 285.77777777777777 353.77777777777777 284.8888888888889 Q 356.44444444444446 285.77777777777777 358.22222222222223 285.77777777777777 Q 360 285.77777777777777 362.6666666666667 286.6666666666667 Q 407.1111111111111 291.1111111111111 445.3333333333333 275.1111111111111 Q 484.44444444444446 258.22222222222223 498.6666666666667 214.66666666666666 Q 501.3333333333333 204 504.8888888888889 173.77777777777777 Q 507.55555555555554 144.44444444444446 509.3333333333333 115.11111111111111 Q 512 85.77777777777777 512 76 Q 512 64.44444444444444 508.44444444444446 50.22222222222222 Q 504.8888888888889 36 492.44444444444446 29.77777777777778 Q 483.55555555555554 23.555555555555557 463.1111111111111 25.333333333333332 Q 442.6666666666667 27.11111111111111 400.8888888888889 55.55555555555556 Q 355.55555555555554 89.33333333333333 315.55555555555554 140 Q 274.6666666666667 189.77777777777777 256 226.22222222222223 L 256 226.22222222222223 Z" />
</svg>
</header>
<div class="sm-content">
hipped in Chrome last month 🙂 (Referring to flex-wrap: balance)
I was very excited to hear from Una Kravets that flex-wrap: balance shipped in Chrome last month. I have been excited about this CSS feature since Una first announced in May 2025. It is similar to text-wrap: balance. It is a great addition to the flex layout.
“flex-wrap:balance allows developers to distribute content between flex-lines so that it appears more balanced (similar to text-wrap:balance).
I added it to several layouts on the Revive Our Hearts website on Friday (not yet pushed to production). It does exactly what it says, it balances out a layout.
Update 7/27/2026: These updates are now on production. You can see the example below on the site in Chrome or Edge, https://www.reviveourhearts.com/store/topics/.
Unbalanced flex layout on left (top for smaller screens), balanced layout on the right (bottom for smaller screens)I have come to like using flex layouts inside of CSS grid layouts when there are a dynamic number of items. You can center the items on the last row and now with flex-wrap: balance, it will center multiple items. It looks a bit nicer than having orphans using CSS grid layout.
flex-wrap: balance only works in Chrome and Edge currently so I am adding it as a progressive enhancement.
Around the workshop
- I worked on a lot of small projects this week at work
- I added sponsors to the Mujer Verdadera ’26 site
- I wrote a report for the front-end team for a board report for Revive Our Hearts. I enjoyed reviewing our accomplishments over the past years.
- I finished up some changes on our podcast landing page to expose more of the content and make it more SEO friendly. The changes have not yet been published to production. We plan to test it on a staging site and then push to the live server later this week.
Articles I read
- Works & Wonders: Bluebirds, The Rarest Books on Earth, Berries Everywhere. (Tim Challies)
- Over 15 years of conference speaking (Rachel Andrew)
- Last week in the studio (CW29-26) (Andy Clarke)
- What Will It Be Like to Cross from This Life to the Next? (Randy Alcorn)
- Rocking the Cradle and Tending the Grave (Tim Challies)
- They Don’t Need to Go On Forever (Jonathan Snook)
- Something Greater Than Outrage (Derek Brown)
- The American town that keeps rising from the ashes (CNN) – An article about Lawrence, Kansas. I lived in Lawrence for six years while attending The University of Kansas.
- Rebuilding FIFA Standings Layout with CSS Subgrid (Ahmad Shadeed) – I liked Ahmad’s solution which was a combination of grid, subgrid, and flexbox. I had built a layout with CSS Grid for the NCAA men’s basketball tournament in 2019.
- Notes from Thursday at Comic Con (Joe Crawford)
- Studio Notes #94 (Dan Cederholm)
- Prodigal Sabbath Rest (O. Alan Noble)
- Dust to Dust by Jen Wilkin (Review): Aging Wisely (Tim Challies)
What I watched
- The most fun I’ve had with CSS in a while thanks to offset-path (Kevin Powell) – This is pretty cool.
- Transition to and from display: none (Kevin Powell) – This is similar to Chris Coyier article I read several weeks ago. The important part is getting the order correct of the “states.” Kevin uses the same idea, just explains it differently.
- Budapest Completely Surprised Me… (Making Maricles, YouTube) – I enjoyed this travel video to Budapest. I ate at Masel Tov when I was there two years ago. Walking across the Chain Bridge is one of my favorite things to do in Budapest.
- Budapest, Oh How Graceful You Are (Costa de Gracia, YouTube)
- Spain vs. Argentina: World Cup Final (FOX)
- Quarterback: Season 3 (Netflix)
- Monsters, Inc. (Disney+)
- All Creatures Great & Small (PBS App)
- Spider-Man: Far from Home (Disney+)
- American Pickers (Samsung TV Plus)
Books I am reading
- The Discipline of Grace (Jerry Bridges)
- Enshittification: Why Everything Suddenly Got Worse and What to Do About It (Cory Doctorow)
- Everything Is Never Enough: Ecclesiastes’ Surprising Path to Resilient Happiness (Bobby Jamieson)
- Enjoying Jesus (Tim Chester)
Walking
- Tuesday – 1.57 miles in 30 minutes
- Wednesday – .8 miles in 15 minutes – A quick walk before a late morning meeting.
What I played
- MLB The Show 23 (Orioles) – I went 1-2 in a series against the Astros this week.
- FC 26 (Norway)
- FC 26 (FC Barecelona) – I started a season with Barca on Friday.
Did you enjoy this article?
Recommend it — Standard Reader surfaces well-loved writing to more readers across the network.