# flexbox Published articles for flexbox. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Meet FlexBox: The Powerful New Layout System for Compose DevFeed: [Meet FlexBox: The Powerful New Layout System for Compose]() Original publisher: [Read original article]() Author: Nav Singh Published: 2026-03-27T18:22:23Z Content type: article Language: en Sources: [Stories by Nav Singh 🇨🇦 on Medium]() Topics: [Jetpack Compose](), [Compose](), [ui](), [CSS]() Tags: [3](), [adaptive](), [alignment](), [android](), [android-app-development](), [androiddev](), [api](), [code](), [compose](), [configuration](), [container](), [css](), [flexbox](), [introduction](), [jetpack-compose](), [layout](), [space](), [ui]() ### AI overview This tutorial introduces FlexBox, a new Jetpack Compose layout system inspired by CSS Flexbox. It explains how FlexBox arranges children dynamically and covers FlexBoxConfig parameters for direction, wrapping, alignment, spacing, and item distribution, along with Modifier.flex controls and code samples. ### Source excerpt Header image Jetpack Compose continues to evolve, and with the introduction of the new FlexBox layout, we finally have a powerful, flexible way to design adaptive UIs -- inspired by the CSS Flexbox model. https://developer.android.com/develop/ui/compose/layouts/adaptive/flexbox If you've ever used Row, Column, or FlowRowYou'll feel right at home. FlexBox acts as a superset, combining their capabilities while providing granular control over alignment, wrapping, and item distribution. Until now, we had to choose between rigid layouts (Row/Column) or more dynamic ones (FlowRow/FlowColumn). FlexBox merges the best of both worlds -- flexibility and simplicity. What Is FlexBox? Composable brings the concept of flexible layouts from the web into Jetpack Compose. Arranges its children dynamically, allowing them to grow, shrink, or wrap based on available space and configuration. Preview FlexBoxFlexBox API🏗 Building blocks and their roles.FlexBoxThe main composable responsible for arranging children.FlexBox( config = { direction(FlexDirection.Row) wrap(FlexWrap.Wrap) justifyContent(FlexJustifyContent.SpaceBetween) alignItems(FlexAlignItems.Center) gap(8.dp) }, modifier = Modifier .border(1.dp, Color.Black) ) { Text( "Item 1", Modifier .flex { grow(1f) } .background(color = randomColor()) .border(1.dp, Color.Black) ) Text( "Item 2", Modifier .flex { basis(80.dp) } .background(color = randomColor())) }Screenshot FlexBox SampleFlexBoxConfigConfigures the container's layout behavior -- direction, wrapping, justification, alignment, and spacing. Key parameters: direction: Controls the main axis (Row, Column). wrap: Determines if items flow onto new lines. Here we have 3 options: Wrap, NoWrap, WrapReverse justifyContent: Distributes space along the main axis(start, end, etc). alignItems: Defines how items align on the cross-axis(start, end, etc). alignContent: Controls how multiple lines are distributed along the cross-axis. This applies only when the wrap is FlexWrap.Wrap or FlexWr ## Updates to the customizable select API DevFeed: [Updates to the customizable select API]() Original publisher: [Read original article]() Published: 2025-01-10T00:00:00Z Content type: release Language: en Sources: [Una Kravets]() Topics: [browser](), [API](), [Web platform](), [web-standards](), [Web Development]() Tags: [api](), [browser](), [customizable](), [developer](), [flexbox](), [updates]() ### AI overview An update on the customizable select API describes changes since its RFC, including renamed elements, revised pseudo-elements, a less intrusive user-agent stylesheet, flexbox-based option styling, and the opt-in usage model. ### Source excerpt Everything that has changed since the RFC post for this feature. ## CSS and TailwindCSS Approaches to Styling Websites in 2024 DevFeed: [CSS and TailwindCSS Approaches to Styling Websites in 2024]() Original publisher: [Read original article]() Author: Mads Brodt Published: 2023-12-27T16:00:42Z Content type: opinion Language: en Sources: [Front-End Focus]() Topics: [CSS](), [Front end](), [Tailwind CSS](), [Web Development](), [Sass](), [Less](), [browsers](), [Design system]() Tags: [2017](), [browsers](), [css](), [design-system](), [flexbox](), [front-end](), [less](), [sass](), [tailwind]() ### AI overview This opinion article examines approaches to styling websites in 2024. It argues that vanilla CSS has become more capable through features such as custom properties, CSS Grid, and CSS nesting, while TailwindCSS remains popular for reducing style conflicts and discouraging arbitrary values. The article also emphasizes that TailwindCSS still requires knowledge of underlying CSS concepts such as Flexbox, Grid, and the box model. ### Source excerpt Hi again! ## 2nd Edition: Please Mind The Gap DevFeed: [2nd Edition: Please Mind The Gap]() Original publisher: [Read original article]() Author: Heydon Pickering Published: 2021-06-29T00:00:00Z Content type: release Language: en Sources: [The Every Layout Blog]() Topics: [Web Development](), [modern web development]() Tags: [components](), [flexbox](), [margin](), [markup](), [properties](), [release]() ### AI overview Every Layout announces its second edition, which focuses on the CSS gap property and its Flexbox support in modern browsers. The article explains how gap can simplify responsive layout components compared with margin-based techniques, reducing intermediary markup and problems with custom properties and nesting. ### Source excerpt We at Every Layout (try to imagine we have some sort of corporate identity rather than being two blokes with a neat website and a script that generates epubs) are proud to announce the release of our second edition! And we are slashing the already low price of $69 down to just $40 to mark the occasion. Just make sure you use 2ND_COMING at checkout ASAP; we can't keep it at that price forever. What's new, then? This edition is all about the gap property, which is now supported with Flexbox in all modern browsers. Why is gap important? Smart layout primitives like the Cluster, Sidebar, and Switcher are all designed to automatically reconfigure themselves to suit different contexts--and without needing JavaScript or @media queries. When doing this, gutters (margins) between elements can be problematic unless handled carefully. A margin applied to one element to create a gap between it and an adjacent element becomes a misplaced margin when the element wraps: Until now, we have solved this by applying margin to child elements symmetrically (to all sides) and using negative margin to deal with the excess. There's nothing wrong with using negative margins per se; it's more a technique than a hack. But this approach does necessitate what we have come to call an intermediary wrapper...
Child 1
Child 2
What this does is insulate the negative margin from the flow of the document. Then we can apply a sensible margin to the outer component itself. In fact, it's more likely this margin would be applied by a parent Stack element, which injects margin between successive elements (Every Layout components are highly modular and composable). Not only does the negative margin technique represent additional markup, but things start to go awry when it comes to custom properties and nesting. Margins are applied to child elements and child elements become parent elements whe ## Randomized Selective Color: A Post List Study DevFeed: [Randomized Selective Color: A Post List Study]() Original publisher: [Read original article]() Published: 2020-04-27T00:00:00Z Content type: article Language: en Sources: [Una Kravets]() Topics: [color](), [CSS](), [JavaScript](), [modern web development](), [Code](), [interactive website](), [Vanilla JavaScript]() Tags: [code](), [color](), [css](), [custom](), [design](), [flexbox](), [javascript](), [properties](), [website]() ### AI overview A study of selective color from a predefined palette for a website redesign. It demonstrates randomized color combinations using CSS custom properties, JavaScript, gradients, flexbox, and progressive enhancement with CSS Houdini. ### Source excerpt A study on selective color from a predefined list, using CSS custom properties, a little bit of JavaScript, and some progressively enhanced CSS Houdini. ## monica.css: A Minimal CSS Framework for Reusable Layout Utilities DevFeed: [monica.css: A Minimal CSS Framework for Reusable Layout Utilities]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2020-02-19T00:00:00Z Content type: tutorial Language: en Sources: [Monica Dinculescu]() Topics: [CSS Framework](), [CSS](), [Web Development]() Tags: [css](), [flexbox](), [framework](), [html]() ### AI overview The article introduces monica.css, a small CSS framework created as a copy-paste collection of frequently used layout utilities. It provides reusable classes for horizontal and vertical flexbox layouts, centering, spacing, visibility, and related defaults. ### Source excerpt Back in the day when I worked on Polymer I got used to relying on a bunch of useful CSS classes that at the time we called iron-flex-layout. They were there partly because flexbox was a sadness on IE and you needed to say everything 3 times to maybe get it right twice, and add some very special flex-basis: 0.000000001px "bug fixes" that tbh nobody should ever have to write by hand. But they were also there because it's kind of nice to say
and for it to just work. Some years later, it's now 2020, and flexbox is really good everywhere! We don't need iron-flex-layout anymore, but tbh I still want to say
and for it to just work. I know there are tons of CSS frameworks out there like tachyons that can do this for me, but most of these frameworks do too much for me. I don't work on large projects that need design systems, and I don't want every possible padding and margin and colour and flexbox configuration in the world. I just want the ones that I know I end up using in every project. So here is monica.css: my very own CSS framework, which I copy paste at the beginning of every CSS file and take it from there. It's already minified and bundled (because you copy pasted it) so dare I say: fast loading and efficient? 🙃 * {box-sizing: border-box} [hidden] {display: none !important} [disabled] {pointer-events:none; opacity: 0.3} .horizontal {display: flex; flex-direction: row; justify-content: space-between} .vertical {display: flex; flex-direction: column} .center {justify-content: center; align-items: center} .flex {flex: 1} html { --spacing-xs: 8px; --spacing: 24px; --spacing-s: 12px; --spacing-m: 36px; } ## Fake audio spectrum, using perlin noise DevFeed: [Fake audio spectrum, using perlin noise]() Original publisher: [Read original article]() Author: Stanko Published: 2019-02-09T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [JavaScript](), [Algorithm](), [CSS](), [Web Development]() Tags: [algorithm](), [code](), [css](), [flexbox](), [javascript]() ### AI overview This tutorial explains how to create a fake audio spectrum that mimics human speech using JavaScript and Perlin noise. The author combines manually tuned values with random and static data, then animates the result with CSS transforms and flexbox. The demo remains a proof of concept and may feel somewhat smooth or unnatural. ### Source excerpt Few days ago, I was chatting with our design team, and we were wondering how hard would be to create a fake audio spectrum (that mimics human speech) and visualize it. I immediately said it should be easy, and that I will play with it over the weekend. Of course, I didn't wait for the weekend, but wrote it the same evening. It was fairly straightforward, but it had few gotchas. Result # Before you start playing with the checkboxes I advise you to read the rest of this post. Use random value Use static sample Use perlin noise value Implementation # My initial idea was to analyze couple of audio files to extract the average valuesTry disabling all checkboxes but "static". for the spectrum. Then combine it with the data from this great post about language pitch. At the end, I ended up tweaking values to make it "look better", based only on my personal feel. Only thing left was to multiple the values I got with the randomly generated value.Enable "random" and "static" checkboxes and disable the "perlin" one to see how it looks. It kinda works, but it feel too random. Perlin noise # But before I started, I asked my colleagues for ideas, and I got some great feedback. One of the suggestions was to use Perlin noise. I've never heard of it, so I did some reading. Perlin Noise is a technique used to produce natural appearing textures on computer generated surfaces for motion picture visual effects. Ken Perlin was frustrated by machine-like look of computer graphics at the time, and created a gradient noise algorithm. It is basically a pseudo-random generator which outputs more nature like patternsDisable. That seemed like a great way to improve my random only solution. There are multiple JavaScript implementations, but I ended using this one as it was really simple and I didn't need 2D or 3D noise. Putting everything together # Now when I had everything I needed, it was easy to write the actual code. Working demo was done really quickly. Then I started playing with values an ## 2018 in Review DevFeed: [2018 in Review]() Original publisher: [Read original article]() Published: 2019-01-04T00:00:00Z Content type: opinion Language: en Sources: [Una Kravets]() Topics: [Development](), [Web Development](), [CSS](), [User interface design](), [Design system](), [Bulma](), [gatsby]() Tags: [blog-posts](), [css](), [design-systems](), [dev](), [flexbox](), [projects](), [review](), [speaking](), [ui]() ### AI overview A personal review of 2018 covering health and family experiences, work at Bustle Digital Group, podcast and blog production, side projects including Gatsby and Flexbox work, and conference speaking. ### Source excerpt Reviewing how my 2018 went, and discussing goals for next year! ## How browsers position floats DevFeed: [How browsers position floats]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2018-04-11T00:00:00Z Content type: tutorial Language: en Sources: [Monica Dinculescu]() Topics: [CSS](), [browsers](), [Algorithm](), [Web Development]() Tags: [algorithm](), [browsers](), [css](), [demo](), [flexbox](), [property]() ### AI overview This article explains how browsers position CSS floats using the float positioning algorithm, including how left and right floats relate to the line box and surrounding non-float content. It also recommends flexbox or CSS grid for most layouts and links to an interactive demo. ### Source excerpt When you have a float CSS property on a box (with a value different than none), this box must be laid out according to the float positioning algorithm. Loosely, it says: if the box has float:left, the box is positioned at the beginning of the line box if the box has float:right, the box is positioned at the end of the line box text (and more generally anything within the normal, non-floaty flow) is laid out along the edges of the floating boxes the clear property changes the floating behaviour. Anyway, in general you'll have a better time if you use a flexbox or CSS grid instead of floats, because floats are quirky and have strange edge cases, but if you were ever curious about how the algorithm would choose where to position different floats, here's a demo (which you can also play with directly on glitch): ## Three CSS Grid Features: Named Areas, Fractional Units, and Built-In Gutters DevFeed: [Three CSS Grid Features: Named Areas, Fractional Units, and Built-In Gutters]() Original publisher: [Read original article]() Published: 2017-03-30T00:00:00Z Content type: article Language: en Sources: [Una Kravets]() Topics: [CSS](), [Web Development](), [web design]() Tags: [browsers](), [css](), [developer-tools](), [firefox](), [flexbox](), [layout]() ### AI overview A short article discusses three CSS Grid features: named layout areas, the fractional fr unit, and built-in gutters. It explains how these features can simplify layout code and reduce reliance on spacing hacks compared with older Flexbox or float-based approaches. ### Source excerpt An awesome CSS grid tool was just released for Firefox, and the web has been buzzing about it. This is a short post about my 3 favorite features! ## The Internet We Know is Built on Hacks DevFeed: [The Internet We Know is Built on Hacks]() Original publisher: [Read original article]() Published: 2015-08-24T00:00:00Z Content type: opinion Language: en Sources: [Una Kravets]() Topics: [Internet](), [Web Development](), [HTTP](), [HTML](), [CSS]() Tags: [css](), [flexbox](), [hacks](), [html](), [http](), [internet]() ### AI overview The article argues that the modern Internet evolved through practical workarounds and extensions of the original hyperlink-based web. It discusses HTML, linked assets, increasing page complexity, and HTTP2 as a response to proliferating links and requests. ### Source excerpt From HTTP2, Flexbox, CSS Filters, and ES6, the Internet we know today is built on hacks. Lets explore some of those hacks and solutions. ## Normalizing Cross-browser Flexbox Bugs DevFeed: [Normalizing Cross-browser Flexbox Bugs]() Original publisher: [Read original article]() Published: 2015-01-05T01:44:38Z Content type: tutorial Language: en Sources: [Philip Walton]() Topics: [bug](), [browser](), [Internet Explorer](), [Front end](), [CSS](), [Testing]() Tags: [also](), [browser](), [bugs](), [css](), [flexbox](), [front-end](), [github](), [internet-explorer](), [testing]() ### AI overview This tutorial examines cross-browser flexbox bugs encountered while building a sticky footer, focusing on Internet Explorer 10 and 11. It explains a browser-independent solution and offers recommendations for writing more compatible flexbox code. ### Source excerpt Way back in September of 2013, while testing my Solved by Flexbox project, I discovered a bug in Internet Explorer 10 and 11 that was preventing my sticky footer from actually sticking to the bottom of the page. I spent some time trying to work around the issue, but all my attempts failed. ## Solved by Flexbox DevFeed: [Solved by Flexbox]() Original publisher: [Read original article]() Published: 2013-10-04T05:59:16Z Content type: article Language: en Sources: [Philip Walton]() Topics: [CSS](), [Web Development](), [modern web development]() Tags: [chrome](), [css](), [firefox](), [flexbox](), [layout](), [safari]() ### AI overview The article introduces the Solved by Flexbox project and explains how the newer Flexbox specification provides a practical CSS solution for layout problems that previously required JavaScript or complex hacks. It notes that the updated specification was becoming available across major browsers, following earlier browser-support and syntax limitations. ### Source excerpt The first version of philipwalton.com was built using Flexbox way back in 2010 when the syntax was display:box. It only worked in Chrome, Safari, and Firefox and was pretty buggy, but it worked and was a million times better than any existing layout method.