#flexbox — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #flexbox, aggregated by home.social.
-
Cheatsheets for Flex, Grid, Anchor Positioning and Invoker Commands, by @polypane.app:
#cheatsheets #css #flexbox #grids #layout #anchorpositioning
-
Cheatsheets for Flex, Grid, Anchor Positioning and Invoker Commands, by @polypane.app:
#cheatsheets #css #flexbox #grids #layout #anchorpositioning
-
Fun with #CSS, this time: flex and the CSS "order" property. How nice is that?
I have a list of <div>s, think of something like a TODO list. If an item is marked, I want it shown towards the end of the list. In former times we would have re-arranged the DOM order. This time I add the "marked" class to the div and
.marked {
order: 1;
}The default "order" value is 0, so all ".marked" items follow all non-marked items without fumbling with the DOM.
-
Waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa, 😠
I want all buttons by default to have
min-width: 40px;
for fat fingers on mobiles. If the button text is longer, I assumed the larger width prevails. But no, if a the containing flex gets narrow, the button goes down to 40px.
Some sloppers say
min-width: max(40px, min-content);
which sounds logical, but is "invalid property" (firefox, chrome).
Ideas?
-
Waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa, 😠
I want all buttons by default to have
min-width: 40px;
for fat fingers on mobiles. If the button text is longer, I assumed the larger width prevails. But no, if a the containing flex gets narrow, the button goes down to 40px.
Some sloppers say
min-width: max(40px, min-content);
which sounds logical, but is "invalid property" (firefox, chrome).
Ideas?
-
Silex — Flexbox layout (rows, centering, wrapping)
-
📡 web.dev.log :: week 3 :: sos adhd paralysis
let the record show that I spent yesterday
rearranging furniture instead of doing CSS.
then did CSS at 1am anyway.
vampire developer lyfeon my way to TMS because the grind is
multilayered and chronically so :blobcat_engineer:
only 3 sessions this week —
holiday Monday, different doctor Thursday.
the body has its own roadmap.
no pull requests accepted.THIS WEEK:
→ backfilling fCC CSS I skipped like someone
who read the last chapter first
→ handwriting a Flexbox cheat sheet
BY HAND. PEN. PAPER. full caveman. :blobcatchewwire:
→ catch-up loop I invented at 2am —
genius or red flag, tbd :ablobfoxloading:NEXT WEEK:
→ UX basics (I will have opinions)
→ v1 portfolio shell, on the ACTUAL INTERNET
where strangers can judge itdo I have any business doing this
while managing a body with its own
appointment calendar? debatable.doing it anyway? oh absolutely. 🧱
#webdev #CSS #Flexbox #100DaysOfCode
#buildinpublic #freeCodeCamp
#TMS #sendhelp #butalsodont -
The State of CSS Centering in 2026, by @css (@csstricks):
https://css-tricks.com/the-state-of-css-centering-in-2026/?ref=frontenddogma.com
-
The State of CSS Centering in 2026, by @css (@csstricks):
https://css-tricks.com/the-state-of-css-centering-in-2026/?ref=frontenddogma.com
-
“safe” in Flex and Grid Alignment, by @iprodan.dev:
-
“safe” in Flex and Grid Alignment, by @iprodan.dev:
-
#WiSheyes #LinkSSy #flexbox #wix #website #websites #websitedesign #tatsLife #WiSheyes #UserRq
Flexbox/Wix(?)
~~~~~~~~~~
my plan is to piece together
a tender "gurlie" website
to exhibit myself
and the things i do
and the things i enjoy
~~~~~~~~~~~~~~
i'll attempt to use a template shown.
~~~~~~~~~~~~~~~~~
my thanks and credit go to
@JenJen
for sharing
https://www.itinerae.org/?m=1 -
-
-
Gotta evaluate the new #CSS #column features.
https://css-tricks.com/css-multi-column-layout-wrapping-features/I created a similar #layout for https://metaspora.org using #flexbox.
-
Gotta evaluate the new #CSS #column features.
https://css-tricks.com/css-multi-column-layout-wrapping-features/I created a similar #layout for https://metaspora.org using #flexbox.
-
Flexbox Masonry Layout (Explained With Math), by @frontendmasters.com:
https://frontendmasters.com/blog/flexbox-masonry-layout-explained-with-math/
-
Flexbox Masonry Layout (Explained With Math), by @frontendmasters.com:
https://frontendmasters.com/blog/flexbox-masonry-layout-explained-with-math/
-
FlexBox is an experimental Jetpack Compose container that lays out items in a single direction, dynamically resizing, wrapping, and aligning them to optimally fill the available space. We just launched new documentation for this feature last week:
https://developer.android.com/develop/ui/compose/layouts/adaptive/flexbox
-
FlexBox is an experimental Jetpack Compose container that lays out items in a single direction, dynamically resizing, wrapping, and aligning them to optimally fill the available space. We just launched new documentation for this feature last week:
https://developer.android.com/develop/ui/compose/layouts/adaptive/flexbox
-
Пример оптимизации интерфейса динамического списка в мобильном приложении, сделанном на 1С при помощи HTML + CSS
Добрый день! Хочу привести пример небольшой оптимизации интерфейса (frontend) мобильного приложения, сделанного на 1С. Разницу вы сами можете проверить, скачав приложение и переключив флаг в настройках "Оформление HTML".
https://habr.com/ru/articles/1002726/
#1с #мобильное_приложение #html #css #flexbox #frontend #backend
-
@bazkie I'm not sure how ironic your comment is meant to be (it would be justified if it were :-)), but this has been possible with #flexbox since 2015. It's even easier with #grid, though. #CSS is getting so nice now, that I'm tempted to do vanilla/raw CSS on the next big project. Haven't done that in decades.
-
@bazkie I'm not sure how ironic your comment is meant to be (it would be justified if it were :-)), but this has been possible with #flexbox since 2015. It's even easier with #grid, though. #CSS is getting so nice now, that I'm tempted to do vanilla/raw CSS on the next big project. Haven't done that in decades.
-
So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.
So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ
cc @bramus
#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition
-
So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.
So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ
cc @bramus
#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition
-
Understanding the Fundamentals of CSS Layout, by @polypane.app:
https://polypane.app/blog/understanding-the-fundamentals-of-css-layout/
-
Understanding the Fundamentals of CSS Layout, by @polypane.app:
https://polypane.app/blog/understanding-the-fundamentals-of-css-layout/
-
#flexbox help, my brain can't parse this:
Two columns; overall height should be determined by the left-hand column. Right hand column contains two items stacked vertically. The bottom one is often quite long, but it should *scroll* rather than extend beyond the bottom of the left column content.
Can anyone point me at the combo of magical flexbox words to do that?
-
#flexbox help, my brain can't parse this:
Two columns; overall height should be determined by the left-hand column. Right hand column contains two items stacked vertically. The bottom one is often quite long, but it should *scroll* rather than extend beyond the bottom of the left column content.
Can anyone point me at the combo of magical flexbox words to do that?
-
CSS Layout: Flexbox, Grid, Media Queries, and Container Queries, by @rauschma:
https://2ality.com/2025/10/css-layout.html
#css #layout #flexbox #grids #mediaqueries #containerqueries #introductions
-
CSS Layout: Flexbox, Grid, Media Queries, and Container Queries, by @rauschma:
https://2ality.com/2025/10/css-layout.html
#css #layout #flexbox #grids #mediaqueries #containerqueries #introductions
-
I thought the bright and friendly #blog design was fine, which is why it went online. But deep down, something else seemed to disagree, and it was becoming increasingly apparent. So I let that guide me to see what the end result would be.
Even simpler #HTML and #CSS, without #grid or #flexbox. Single-column again, but above all, dark. I like the dark mode, and it actually fits the orientation much better.
No, it's not online yet 😉 First, there are over 200 files to edit 🥵
-
Das helle und freundliche #Blog-Design fand ich in Ordnung, weshalb es ja auch online ging. Doch tief in mir war da wohl etwas anderer Meinung und hat sich immer stärker ins Bewusstsein gedrängt. Also habe ich mich davon leiten lassen, um zu sehen, was am Ende herauskommt.
Noch simpleres #HTML und #css, ohne #grid oder #flexbox. Wieder einspaltig, doch vor allem dunkel. Mir gefällt der Dark-Mode und passt im Grunde auch viel besser zur Ausrichtung.
Nein, ist noch nicht online 😉 Erst einmal gilt es, über 200 Dateien zu bearbeiten 🥵
-
»Another article about centering in CSS«
https://piccalil.li/blog/another-article-about-centering-in-css/This blog post by Picalilli's Andy Bell is a one-stop shop about centering in CSS. Bookmarked.
#CSS #layout #grid #flexbox #margin #position https://front-end.social/@piccalilli/115026791147284583
-
On the article referenced in https://mastodon.design/@julieblanc/114898215638090915, @julieblanc quoted a #TAG commentary
"Overall, we think #Masonry, #Grid, and wrapping #Flexbox should be incorporated into a unified set of properties. #Chrome’s [New Masonry Layout] proposal splits apart property sets too eagerly, but even the #WebKit [using CSS Grid] proposal seems to miss a chance to develop more-general properties. (…) #CSS currently has 3 layout modes (…): Grid, Multicol, and wrapping Flexbox. This is already causing a lot of author confusion, and Masonry attempts to add a 4th mode. As a general principle, having vastly different ways to accomplish slightly different things is a usability #antipattern. We urge the [CSS] W[orking] G[group] to explore ways to unify these so that authors can port more knowledge from one to the other (even if they are implemented as separate code paths internally). (Issue #1003 on w3ctag/design-reviews, comment on Nov 20, 2024, by #JeffreyYasskin /@jyasskin) -
On the article referenced in https://mastodon.design/@julieblanc/114898215638090915, @julieblanc quoted a #TAG commentary
"Overall, we think #Masonry, #Grid, and wrapping #Flexbox should be incorporated into a unified set of properties. #Chrome’s [New Masonry Layout] proposal splits apart property sets too eagerly, but even the #WebKit [using CSS Grid] proposal seems to miss a chance to develop more-general properties. (…) #CSS currently has 3 layout modes (…): Grid, Multicol, and wrapping Flexbox. This is already causing a lot of author confusion, and Masonry attempts to add a 4th mode. As a general principle, having vastly different ways to accomplish slightly different things is a usability #antipattern. We urge the [CSS] W[orking] G[group] to explore ways to unify these so that authors can port more knowledge from one to the other (even if they are implemented as separate code paths internally). (Issue #1003 on w3ctag/design-reviews, comment on Nov 20, 2024, by #JeffreyYasskin /@jyasskin) -
I still like to go to #YouTube for #tutorials. No idea why I didn't do that for #css #grid and #flexbox until now. I made up for this omission yesterday. Oh dear, the result was devastating. I'm obviously lucky that my tinkering worked. This delays the restart of the blog even further, because of course I can't leave it at that.
-
Für #Tutorials steuere ich nach wie vor gerne #YouTube an. Keine Ahnung, warum ich das für #css #grid und #flexbox bisher nicht machte. Das Versäumnis habe ich gestern nachgeholt. Oje, das Ergebnis war niederschmetternd. Ich habe offenbar Glück, dass mein Gebastel funktioniert. Damit verzögert sich der Neustart des Blogs noch weiter, denn das kann ich natürlich nicht so stehen lassen.
-
Use CSS “reading-flow” for Logical Sequential Focus Navigation, by @rachelandrew (@developers):
-
Help an idiot who is useless with layout? How can I get this result with flexbox and no media queries? If viewport wide enough, those small articles are on the side, one under the other. Otherwise, they're below, next to one another.
https://codepen.io/thebabydino/pen/XJJpjzv
Thanks!
-
Item Flow: A New Unified Concept for Layout, by @saron.bsky.social and @fantasai and others (@webkit):
https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/
-
Grid First, Flex Third, by @fimion:
-
“Item Flow, Part 1: A new unified concept for layout” by @jensimmons, Saron Yitbarek, Elika Etemad and Brandon Stewart
🔗 https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/
> As we worked through the details, we started to get excited. Suddenly new features for Flexbox and Grid that people have wanted for years had an obvious home. Things seemed to click together elegantly. New capabilities emerged
This is really an exciting…
⚓️ https://nicolas-hoizey.com/links/2025/04/01/item-flow-part-1-a-new-unified-concept-for-layout/