Webflow Flexbox Game – learn CSS flexbox visually

What it does

Master the fundamentals of CSS flexbox through 28 progressively tougher, interactive levels. No coding required! Flexbox, also known as flex or flexible box layout, is a display setting that lets you align elements in a box. Flexbox offers layout control in 1 dimension — either vertically or horizontally. If you want to learn how to design real flexbox-powered layouts, check out Webflow's all-new 100% visual flexbox builder. Move the green circle into the outline using Flex Layout settings. Use Flex Layout settings on the Playground element to move circles 1 and 2 to their corresponding outlines. In addition to distributing elements along the default horizontal axis, you can also align them…from flexboxgame.com

• 
  Webflow Flexbox UI Builder2016 · flexbox.webflow.com · ▲444

  Build flexible, responsive layouts - without writing code

• 
  Flexbox.io – a free video series on learning CSS Flexbox2015 · flexbox.io · ▲236

  A simple 20 video course that will help you master CSS Flexbox

• 
  Flexbox Defense – learn CSS flexbox by playing a tower defense game2016 · flexboxdefense.com · ▲243

  Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!

• SW
  Struggle with CSS Flexbox? This Playground Is for You2025 · yoavsbg.github.io · ▲315

  Experiment with different flex properties to understand how they affect layout. Adjust the controls below to see changes in real-time and copy the generated CSS code.

• 
  Flexbox Froggy2015 · flexboxfroggy.com · ▲97

  A game for learning CSS flexbox

• 
  Flex2019 · ▲325

  Flexbox's are a pain to write, Flex makes it easy.

• 
  /dev/null▲483

  a social network for devs

  Dev tools · 3d ago · dev-null.sh

• 
  Whiteboard (YC W26) – an open-source IDE for thoughtful software design▲423

  open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.

  Dev tools · 27d ago · github.com

• 
  Reladraw – A diagram language where you decide where to place things▲411

  Contribute to reladraw/reladraw development by creating an account on GitHub.

  Dev tools · 25d ago · github.com

• 
  OpenBot▲362

  Grok Bot alternative: free, local, open-source, multiplayer

  Dev tools · 23d ago · openbot.run

• 
  Talanoa▲345

  Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…

  Dev tools · 20d ago · talanoa.email

• 
  CoreSpeed▲332

  One MCP for everything your agents need: apps, memory, tools

  Dev tools · 28d ago · corespeed.io

• 
  Good Email Copy▲1,984

  Email copy from great companies.

  Growth · 2016 · goodemailcopy.com

• 
  Tesla Model 3▲1,311

  The mass market electric car by Tesla is here ⚡️🚘

  Life & fun · 2016 · tesla.com

• 
  Kite▲867

  Internet-connected programming

  Dev tools · 2016 · kite.com

• 
  Project Infinite by Dropbox▲859

  Access all the files on Dropbox without having to sync

  Work · 2016 · blog.dropbox.com

• 
  Api.ai for Facebook Messenger▲852

  The easiest way to build an FB bot. No coding required!

  Dev tools · 2016

• 
  I made an interactive Bootstrap 4 cheat sheet▲847

  Quickly find your Bootstrap classes on this interactive Bootstrap cheat sheet. It includes code samples and live preview of elements.

  Dev tools · 2016 · hackerthemes.com