[{"data":1,"prerenderedAt":542},["ShallowReactive",2],{"project-42600586":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":43,"post_text":44,"what":45,"said":74,"maker_in_thread":159,"shape":169,"grid":174,"attempts":504,"same_week":505,"maker_shows":41,"maker_hidden":534,"reader_version":535,"card":536},"42600586","CSS Flexbox Playground","Struggle with CSS Flexbox? This Playground Is for You","title","Show HN: Struggle with CSS Flexbox? This Playground Is for You","https:\u002F\u002Fyoavsbg.github.io\u002Fcss-flexbox-playground\u002F","yoavsbg.github.io","yoav_sbg",1736067721,2025,315,115,165,3837,5,"legend","dev_tools","css learning playground","web_app",[24,25,26,27],"css flexbox","flexbox playground","flexbox tutorial","css layout","roasted",-0.162,{"positive":31,"neutral":32,"mixed":33,"critical":34},4,3,2,10,19,{"docs":37,"design":39,"execution":40,"idea":42},{"positive":38,"critical":33},0,{"positive":33,"critical":18},{"positive":41,"critical":41},1,{"positive":38,"critical":33},[41,41,41,41,32,38,38,38,38,41,38,38,38,41,38,38,38,38,38,38,38,38,38,38,38,38,18,41,18,38,38,38,38,38,38,32,32,38,18,32],"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.",{"problem":46,"audience":52,"pricing":64,"motivation":65,"time_to_build":64,"stack":71,"openness":72,"stage":73,"team_size":72},{"value":47,"source":48,"evidence":49},"Hard to remember and understand how flexbox properties affect layout","maker",[50],{"id":51},"post",{"value":53,"source":54,"evidence":55},"Developers learning or working with CSS flexbox","inferred",[56,60],{"id":57,"by":58,"text":59},"42603143","karaterobot","In my opinion, flexbox is simple and makes a lot of sense. The problem is that its properties and values were named by a committee, so they aren't intuitive to anyone who wasn't…",{"id":61,"by":62,"text":63},"42600736","p0w3n3d","2025: two years and three tutorials later I still cannot use flex properly. Another one that didn't help me as well: https:\u002F\u002Fflexboxfroggy.com\u002F",null,{"value":66,"source":48,"evidence":67},"Help people understand flexbox through play rather than reading",[68],{"id":69,"by":11,"text":70},"42600757","I also know flexboxfroggy but as I like to \"play\" and less read\u002Fwrite I didn't find this website useful. Hope you will find it useful. If something is missing, please let me know…",[],"unknown","launched",{"praise":75,"objections":98,"requests":111,"questions":127,"alternatives":128},[76,87],{"value":77,"source":78,"evidence":79},"Fun, interactive way to learn flexbox","commenter",[80,83],{"id":81,"by":11,"text":82},"42600840","I added the github Link if you have any feedback or changes!",{"id":84,"by":85,"text":86},"42600797","codedrivendev","I know others have already mentioned it, but i've recommended https:\u002F\u002Fflexboxfroggy.com\u002F to others before and they quickly picked it up. This is another good one for learning css…",{"value":88,"source":78,"evidence":89},"Useful visual cheatsheet alongside other flexbox tools",[90,94],{"id":91,"by":92,"text":93},"42601362","vidyesh","This is great for quick visual cheatsheet but I think one just has use it everywhere in a project to make it stick. The syntax is fairly self-explainatory for me. (except row and…",{"id":95,"by":96,"text":97},"42601318","darekkay","When learning Flexbox, I've created a cheat sheet to look up the properties. Others might find it useful, too: https:\u002F\u002Fdarekkay.com\u002Fflexbox-cheatsheet\u002F",[99,106],{"value":100,"source":78,"evidence":101},"Playground only covers four container properties, not child item properties",[102],{"id":103,"by":104,"text":105},"42601195","Kwpolska","This seems extremely limited to just four container properties, completely ignoring the child item properties, which are quite important in flexbox as well.",{"value":107,"source":78,"evidence":108},"Flexbox itself is hard to remember and reason about",[109,110],{"id":57,"by":58,"text":59},{"id":61,"by":62,"text":63},[112,120],{"value":113,"source":78,"evidence":114},"Add child item properties like flex-basis and grow",[115,119],{"id":116,"by":117,"text":118},"42601354","atum47","You should let the use play around with the number of items inside the container and it's parameters as well, like flex-basis, grow... Good job never the less",{"id":103,"by":104,"text":105},{"value":121,"source":78,"evidence":122},"Add a grid playground",[123],{"id":124,"by":125,"text":126},"42633336","amberwagner","Maybe Grid Playground is a useful choice as well. In my opinion, CSS Grid layout has much more options than Flexbox.",[],[129,134,142,149],{"value":130,"source":78,"evidence":131},"Flexbox Froggy",[132,133],{"id":84,"by":85,"text":86},{"id":61,"by":62,"text":63},{"value":135,"source":78,"evidence":136},"Grid Garden",[137,141],{"id":138,"by":139,"text":140},"42603361","frob","I've gone back to https:\u002F\u002Fcssgridgarden.com\u002F multiple times. It's https:\u002F\u002Fflexboxfroggy.com\u002F but for grids.",{"id":84,"by":85,"text":86},{"value":143,"source":78,"evidence":144},"Josh Comeau's interactive flexbox guide",[145],{"id":146,"by":147,"text":148},"42601028","smarkov","I highly recommend Josh's guide: https:\u002F\u002Fwww.joshwcomeau.com\u002Fcss\u002Finteractive-guide-to-flexbox\u002F It goes over more advanced gotchas and tips in detail such as flex-basis, auto…",{"value":150,"source":78,"evidence":151},"CSS-Tricks complete guide to flexbox",[152,156],{"id":153,"by":154,"text":155},"42604574","bobbylarrybobby","I have to visit https:\u002F\u002Fcss-tricks.com\u002Fsnippets\u002Fcss\u002Fa-guide-to-flexbox\u002F literally every time. There's a similar one for grid that's just as good.",{"id":157,"by":139,"text":158},"42603385","Years ago I printed out the poster version of https:\u002F\u002Fcss-tricks.com\u002Fsnippets\u002Fcss\u002Fa-guide-to-flexbox\u002F. It has lived on my desk since then. Every time I need to work with flexbox,…",{"comments":160,"answered":38,"key":161},6,[162,165,168],{"id":163,"text":164},"42600833","I like the gamification of the cssgridgarden, it is similar to https:\u002F\u002Fwww.codemonkey.com\u002F which is mainly for kids!",{"id":166,"text":167},"42600827","Thanks. your playground is very informative. Like!",{"id":69,"text":70},{"commenters":170,"max_depth":171,"maker_replies":160,"first_comment_mins":172,"lifespan_hours":173},81,12,41,204,[175,177,181,184,186,190,193,196,198,201,204,206,209,212,215,218,221,223,226,228,230,232,235,238,241,244,247,250,253,256,259,263,266,267,270,273,276,277,279,283,285,287,290,291,295,298,300,303,305,307,310,313,316,318,321,324,327,330,333,336,338,341,344,346,349,352,354,357,359,361,363,365,367,369,372,373,376,379,382,385,389,392,394,398,400,403,405,408,410,413,416,419,421,425,430,434,436,440,444,447,451,454,458,460,465,469,473,477,480,482,484,488,492,496,501],[57,38,41,176,58,38],"project\u002Fcritical\u002Fdocs",[178,38,32,179,180,38],"42603201","project\u002Fneutral\u002Fdocs","cynicalpeace",[182,38,38,183,154,38],"42604558","commenter\u002Fneutral\u002Fnone",[185,38,38,183,180,38],"42605858",[187,38,41,188,189,38],"42604809","project\u002Fcritical\u002Fdesign","itake",[191,38,41,188,192,38],"42605947","phist_mcgee",[194,38,41,188,195,38],"42603291","dieselgate",[138,38,38,197,139,38],"other\u002Fneutral\u002Fdocs",[199,38,41,176,200,38],"42603398","dylan604",[202,38,38,183,203,38],"42603436","mixmastamyk",[205,38,41,188,200,38],"42603732",[207,38,38,197,208,38],"42603880","sosborn",[210,38,38,183,211,38],"42604120","recursive",[213,38,32,214,200,38],"42604205","project\u002Fneutral\u002Fdesign",[216,38,38,183,217,38],"42604740","robertoandred",[219,38,38,220,200,38],"42604786","other\u002Fneutral\u002Fnone",[222,38,38,183,211,38],"42607060",[224,38,38,225,200,38],"42611227","commenter\u002Fcritical\u002Fnone",[227,38,38,183,211,38],"42612240",[229,38,38,225,200,38],"42613251",[231,38,38,183,211,38],"42614822",[233,38,38,220,234,38],"42603667","pjmlp",[236,38,38,197,237,38],"42604748","bobthepanda",[239,38,38,220,240,38],"42607884","namibj",[242,38,38,197,243,38],"42605648","JamesSwift",[245,38,38,197,246,38],"42608302","microflash",[248,38,41,188,249,38],"42611477","WorldMaker",[251,38,38,220,252,38],"42603295","holoduke",[254,38,38,220,255,38],"42603886","nox101",[257,38,38,197,258,38],"42605953","nicoburns",[260,38,38,261,262,38],"42604498","other\u002Fcritical\u002Fdesign","yojo",[264,38,38,220,265,38],"42605835","umvi",[153,38,38,197,154,38],[268,38,38,220,269,38],"42605433","paradox460",[271,38,38,220,272,38],"42605894","cyberax",[274,38,38,261,275,38],"42606313","65",[84,41,38,197,85,38],[163,41,38,278,11,41],"other\u002Fpositive\u002Fdesign",[280,41,41,281,282,38],"42601299","project\u002Fcritical\u002Fexecution","KolmogorovComp",[284,41,38,183,195,38],"42603308",[286,41,38,183,282,38],"42689255",[288,41,38,197,289,38],"42603529","kmoser",[146,33,38,197,147,38],[292,33,38,293,294,38],"42608278","other\u002Fpositive\u002Fdocs","jeeyoungk",[296,32,38,278,297,38],"42600791","likium",[166,32,38,299,11,41],"maker\u002Fpositive\u002Fnone",[301,32,38,278,302,38],"42602697","notRobot",[61,31,38,304,62,38],"other\u002Fcritical\u002Fdocs",[69,31,38,306,11,41],"maker\u002Fneutral\u002Fnone",[308,31,38,261,309,38],"42600784","aimazon",[311,31,38,183,312,38],"42600948","oneeyedpigeon",[314,31,38,183,315,38],"42602004","esprehn",[317,31,38,183,62,38],"42614459",[319,31,38,261,320,38],"42601323","lenkite",[322,18,38,261,323,38],"42601111","vishnuharidas",[325,18,38,261,326,38],"42601175","freetonik",[328,18,38,220,329,38],"42601624","sureIy",[331,18,38,220,332,38],"42601909","cluckindan",[334,18,38,220,335,38],"42601197","sod",[337,18,38,261,323,38],"42601228",[339,18,38,183,340,38],"42601808","rererereferred",[342,18,38,220,343,38],"42601437","insin",[345,18,38,220,332,38],"42601897",[347,18,38,220,348,38],"42602138","9dev",[350,18,38,220,351,38],"42605271","tracker1",[353,18,38,220,348,38],"42606124",[355,18,38,220,356,38],"42603469","gjsman-1000",[358,18,38,220,332,38],"42604379",[360,18,38,183,356,38],"42604884",[362,18,38,183,332,38],"42605590",[364,18,38,183,356,38],"42606728",[366,18,38,183,332,38],"42608958",[368,18,38,220,340,38],"42601719",[370,18,38,183,371,38],"42602629","cantSpellSober",[95,160,38,197,96,38],[374,160,18,375,340,38],"42601753","project\u002Fpositive\u002Fdesign",[91,377,32,378,92,38],7,"project\u002Fmixed\u002Fdocs",[380,377,38,183,381,38],"42606600","emmanueloga_",[103,383,41,384,104,38],8,"project\u002Fcritical\u002Fidea",[386,387,38,220,388,38],"42601873",9,"n144q",[390,387,38,220,391,38],"42601948","buremba",[116,34,18,393,117,38],"project\u002Fpositive\u002Fexecution",[395,396,38,220,397,38],"42600838",11,"philippta",[399,396,38,220,343,38],"42601176",[401,396,38,220,402,38],"42601563","jbeninger",[404,396,38,220,258,38],"42605986",[406,396,38,220,407,38],"42606930","pcchristie",[409,396,38,220,332,38],"42601928",[411,171,38,220,412,38],"42603252","bigtex88",[414,171,38,220,415,38],"42604562","CamperBob2",[417,171,38,220,418,38],"42607233","mhuffman",[420,171,38,220,412,38],"42623540",[422,423,38,220,424,38],"42606572",13,"sota_pop",[426,427,38,428,429,38],"42602105",14,"other\u002Fcritical\u002Fnone","indulona",[431,432,38,433,332,38],"42601368",15,"other\u002Fneutral\u002Fperformance",[157,435,38,197,139,38],16,[437,438,38,220,439,38],"42604299",17,"hk1337",[441,442,38,220,443,38],"42600881",18,"scotty79",[445,35,38,197,446,38],"42604124","rinvi",[448,449,38,220,450,38],"42600975",20,"andrewstuart",[124,452,32,453,125,38],21,"project\u002Fneutral\u002Fidea",[455,456,38,220,457,38],"42601644",22,"lovegrenoble",[459,456,38,220,11,41],"42602620",[461,462,18,463,464,38],"42605259",23,"project\u002Fpositive\u002Fnone","tiznow",[466,467,41,384,468,38],"42607575",24,"mediumsmart",[470,471,38,220,472,38],"42605754",25,"jbverschoor",[474,475,38,220,476,38],"42601120",26,"sn0wtrooper",[478,475,38,183,479,38],"42601601","conradfr",[481,475,38,220,11,41],"42602612",[81,483,38,306,11,41],27,[485,486,18,375,487,38],"42621393",28,"thetalhatahir",[489,490,38,220,491,38],"42600829",29,"wouldbecouldbe",[493,494,38,220,495,38],"42600882",30,"BiteCode_dev",[497,498,32,499,500,38],"42601043",31,"project\u002Fmixed\u002Fnone","dom96",[502,498,38,183,503,38],"42603106","nayuki",[],[506,511,516,521,525,529],{"id":507,"name":508,"points":509,"category":510},"42634787","Atlas of Space",770,"learning_science",{"id":512,"name":513,"points":514,"category":515},"42624116","Tramway SDK",660,"games",{"id":517,"name":518,"points":519,"category":520},"42585009","Pimosa",526,"creative",{"id":522,"name":523,"points":524,"category":20},"42635942","Stagehand",326,{"id":526,"name":527,"points":528,"category":20},"42623593","HipScript",309,{"id":530,"name":531,"points":532,"category":533},"42584896","DeepFace",257,"ai",false,"v2",{"id":537,"name":5,"line":6,"ai":534,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":538,"top":18,"kw":539,"maker":11,"domain":10,"tier":19,"attempts":38,"strip":540,"url":9,"mix":541,"praise":77,"objection":100,"sub":21},42600586,-0.16,[24,25,26,27],"1111300001000100000000000051500000033053",[31,32,33,34],1793991110155]