#flexbox — Public Fediverse posts

Cheatsheets for Flex, Grid, Anchor Positioning and Invoker Commands, by @polypane.app:

https://polypane.app/blog/cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands/?ref=frontenddogma.com

#cheatsheets #css #flexbox #grids #layout #anchorpositioning

Cheatsheets for Flex, Grid, Anchor Positioning and Invoker Commands, by @polypane.app:

https://polypane.app/blog/cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands/?ref=frontenddogma.com

#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.

#flex #flexbox

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?

#javascript #css #flexbox #button

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?

#javascript #css #flexbox #button

Silex — Flexbox layout (rows, centering, wrapping)

https://video.silex.me/w/n9Gs9JFj5JRCQE2BwX8abZ

Warum ist die @jadyn und @nominom eigentlich dadrüber verwirrt das ich eine Auto #Flexbox habe neben der „Büro“/Hackspace und Zuhause Flexbox?

#Network #Internet #BGP #SinglemodeUltras

Warum ist die @jadyn und @nominom eigentlich dadrüber verwirrt das ich eine Auto #Flexbox habe neben der „Büro“/Hackspace und Zuhause Flexbox?

#Network #Internet #BGP #SinglemodeUltras

📡 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 lyfe

on 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 it

do 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

#css #centering #flexbox #grids

The State of CSS Centering in 2026, by @css (@csstricks):

https://css-tricks.com/the-state-of-css-centering-in-2026/?ref=frontenddogma.com

#css #centering #flexbox #grids

I finally added the #Bubbles widget to my website, I also learned a bit more #flexbox magic

#IndieWeb #SmallWeb #Jekyll #CSS

I finally added the #Bubbles widget to my website, I also learned a bit more #flexbox magic

#IndieWeb #SmallWeb #Jekyll #CSS

“safe” in Flex and Grid Alignment, by @iprodan.dev:

https://iprodan.dev/l/safe-alignment/

#css #flexbox #grids #layout #alignment

“safe” in Flex and Grid Alignment, by @iprodan.dev:

https://iprodan.dev/l/safe-alignment/

#css #flexbox #grids #layout #alignment

#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

me trying to remember #flexbox logic every time...

#html #css

me trying to remember #flexbox logic every time...

#html #css

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/

#css #flexbox #layout #math

Flexbox Masonry Layout (Explained With Math), by @frontendmasters.com:

https://frontendmasters.com/blog/flexbox-masonry-layout-explained-with-math/

#css #flexbox #layout #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

#androidDev #JetpackCompose #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

#androidDev #JetpackCompose #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/

#fundamentals #css #layout #grids #flexbox #positioning

Understanding the Fundamentals of CSS Layout, by @polypane.app:

https://polypane.app/blog/understanding-the-fundamentals-of-css-layout/

#fundamentals #css #layout #grids #flexbox #positioning

𝗖𝗦𝗦 𝗟𝗮𝘆𝗼𝘂𝘁 𝗚𝗲𝗻𝗲𝗿𝗮𝘁𝗼𝗿:

#CSS #Grid #Flexbox #Template #Layout

https://thewhale.cc/posts/css-layout-generator

Create flexible and responsive designs in no time using these CSS grid and flexbox-based templates.

【CSS】要素がはみ出る！そんな時はまずmin-widthを0にする
https://qiita.com/hrel11/items/fe402e3a7ed63d8cbe58?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #HTML #CSS #フロントエンド #flexbox #tailwindcss

#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)

Flexboxを学んで分かったことまとめ
https://qiita.com/maedaHARUYA/items/317c7efc186289b09e1d?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #CSS #flexbox

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.

Masonry, Item Flow, and… GULP?, by @Meyerweb:

https://meyerweb.com/eric/thoughts/2025/05/21/masonry-item-flow-and-gulp/?_bhlid=4416223e6b626c5e6bbfef00ce9ad47789aa40e3

#css #masonry #flexbox #grids #layout

Masonry, Item Flow, and… GULP?, by @Meyerweb:

https://meyerweb.com/eric/thoughts/2025/05/21/masonry-item-flow-and-gulp/?_bhlid=4416223e6b626c5e6bbfef00ce9ad47789aa40e3

#css #masonry #flexbox #grids #layout

Use CSS “reading-flow” for Logical Sequential Focus Navigation, by @rachelandrew (@developers):

https://developer.chrome.com/blog/reading-flow

#css #flexbox #grids #layout #accessibility

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!

#CSS #flexbox #layout #code #coding #frontend

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/

#css #layout #grids #flexbox #masonry

Grid First, Flex Third, by @fimion:

https://alex.party/posts/2025-03-23-grid-first-flex-third/

#css #layout #grids #flexbox

“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…

#CSS #Masonry #Grid #Flexbox

⚓️ https://nicolas-hoizey.com/links/2025/04/01/item-flow-part-1-a-new-unified-concept-for-layout/