0
0
0
0
#FlexBox
Latest posts tagged with #FlexBox on Bluesky
Trending
Posts tagged #FlexBox
Understanding the Fundamentals of CSS Layout, by @polypane.app:
polypane.app/blog/understanding-the-f...
#fundamentals #css #layout #grids #flexbox
3
1
0
0
Key Flexbox shorthands 👇
• flex: 1 1 0; → grow, shrink, basis in one line
• gap: 20px 40px; → row-gap + column-gap
• flex-flow: column wrap; → direction + wrap
• place-content: center; → justify + align content
Same behavior. Fewer lines. Cleaner CSS.
.
.
#CSS #Flexbox
1
0
0
0
An old-fashioned painting from "2047AD" of a father telling his children, "... and that's when The Great War between the grid and flexbox loyalists started..."
No matter which side you fight for in the layout wars, you need good data for your components. Our API delivers clean, structured content for your link preview cards. You handle the CSS, we'll handle the scraping.
opengraph.tools
#meme #css #flexbox #frontend #webdesign
6
0
1
0
#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 […]
0
0
0
0
CSSで要素を中央に配置するの、いつも手こずっていませんか？
Flexboxを使えば、縦横中央揃えが驚くほど簡単になります。
`parent { display: flex; justify-content: center; align-items: center; /* height: 100vh; */ }`
親要素にこれを指定するだけで、子要素が中央に。`height`を指定すればより柔軟な配置が可能です。
このテクニックをマスターすれば、レイアウト作業が格段に楽になりますよ！
#CSS #Flexbox #Web開発
0
0
0
0
CSSでの要素の中央寄せ、まだ苦労してますか？
Flexboxを使えば一発です！親要素に `display: flex;` を指定し、`justify-content: center;` で水平方向、`align-items: center;` で垂直方向の揃えが可能です。これにより、コンテンツの配置が格段に楽になります。
このテクニックをマスターすれば、レイアウトの自由度が飛躍的に向上し、より美しいデザインを効率的に実装できますよ。
#CSS #Flexbox #Web開発 #フロントエンド
0
0
0
0
CSS Layout: Flexbox, Grid, Media Queries, and Container Queries, by @rauschma@fosstodon.org:
https://2ality.com/2025/10/css-layout.html
#css #layout #flexbox #grids #mediaqueries
0
0
0
0
A screenshot of the navigation links on my website. The first line has a mid-dot at the end, and the second line does not, so they're misaligned.
Hey #CSS / #flexbox folks:
On pup-e.com I have a `nav ul` rule with `display: flex` and `flex-wrap: wrap`
With flexbox, is it possible to only put a character between each item that's on the same row?
atm I put a mid-dot between each item, but it looks like shit if it goes over multiple lines.
0
0
2
0
GRUNX-Wipro Flex Box with 4-Meter Cord Don’t let distance limit you Wipro Flex Box with 4 m cord & universal sockets power where you need it.
#Wipro #FlexBox #ExtensionCord #PowerSolutions #TechEssentials #StayConnected #HomeOfficeSetup #PowerAnywhere #SmartLiving #UniversalSockets #WorkFromHome
0
0
0
0
J’ai réussi à fuir html et css pendant toutes ces années…
Mais c’est fini. À la découverte de #flexbox.
1
0
0
0
I'm so happy I found this fun little web game to practice Flexbox!
24/24 levels — done 👌🏻🐸
I seriously love these frogs ❤️
flexboxfroggy.com
#frontend #Flexbox #CSS #webDev #FrontendDev #LearnToCode
2
0
0
0
understanding flexbox bit by bit but still shi@ ☠
#webdeveloper #flexbox #aspiringwebdeveloper #trialanderror
1
0
0
0
Ayoo flex box this is shi@ 😭
#webdevelopment
#flexbox
3
0
0
0
finished The Odin Project's flexbox practice! 💪
learned a whole lot and even made a little gallery page to show off my solutions.
flexbox mastery unlocked? 🤔 (no) #TheOdinProject #webdev #flexbox #CSS #learning
1
0
0
0
5/TBD
Now we're cooking.
✅ Scoreboard Flexbox complete for desktop view.
🔥
#buildinpublic #webdev #flexbox
2
1
0
0
A man separates the sea by applying the CSS code #Red.sea { display: flex; justify-content: space-between; }
comiCSS #42: Moses and the Red Sea
comicss.art/comics/42/mo...
June 20, 2022 — Moses flexing and parting the Red Sea waters using FlexBox and space-between. A bit silly, but I like it.
#css #flexbox #cartoon #webdevelopment
13
3
0
0
Finally had time to update the Flexbox Cheatsheet / Visual aid. Now you can change most of the flex related properties and see their effect.
codepen.io/kdankov/full...
#css #flexbox
0
0
0
0
Three versions of the surprised pikachu meme: First: Me: *draws Pikachu meme in CSS* People: (surprised Pikachu with no text) Second: Me: *adds Flexbox to Pikachu meme* Pikachu: (surprised Pikachu meme, but all the face elements are in line horizontally at the top of the face) Third: Me: *adds flex-direction: column* Pikachu: (surprised Pikachu meme, but all the face elements are in line vertically at the left of the face)
comiCSS #36: Flexbox Pikachu
comicss.art/comics/36/fl...
I reused the surprised Pikachu meme that I had already coded for a previous cartoon to create this version (based on an image I saw online). It required a little more than just adding flexbox... but not much tbh.
#css #meme #pokemon #flexbox
7
1
0
0
Masonry, Item Flow, and… GULP?, by @meyerweb@mastodon.social:
meyerweb.com/eric/thoughts/2025/05/21...
#css #masonry #flexbox #grids #layout
0
0
0
0
And for anyone who has been inspired and would like a few more words to go with this excellent illustration... here's my go-to standard...
#css #flexbox #frontend #ui #ux #design #webDev
css-tricks.com/snippets/css...
0
0
0
0
Use CSS “reading-flow” for Logical Sequential Focus Navigation, by @rachelandrew@front-end.social (@developers@chromium.social):
https://developer.chrome.com/blog/reading-flow
#css #flexbox #grids #layout #accessibility
0
0
0
0
Flexbox Shorthands 💡
flex: 1 1 0; #flex #shorthand
gap: 20px 40px; #gap #spacing
flex-flow: column wrap; #flexbox #layout
place-content: center; #alignment #cssshortcuts
✅ #CleanCode #CSSTips #WebDev
0
0
0
0
When using #css #flexbox, I get this tendency to use `margin: auto` whenever I want to push single item to the flex-end.
For example (assuming ltr mode here and for the rest of the thread), inside `display:flex; flex-direction: column` I would put...
1/
0
0
1
0
Does anyone actually remember when to use align-items vs align-content vs justify-items vs justify-content? Sometimes I feel like I actually understand, only to immediately fall flat on my face 😭
#css #flexbox #grid
1
0
0
0
Ecke in der Wohnung frei? Kleine Gratis-Box senkt Stromkosten
#FlexHomeEnergy #FlexBox #Energiewende #revolutionär
www.chip.de/news/Ecke-in...
0
0
0
0
Master Flex Grow Like a Pro 🚨 Easily control element sizing in your layouts — quick guide inside!
Explore more Flexbox tips at javidev (link in my profile) — creation by frontendjoe.
#FlexGrow #Flexbox #CSSLayout #WebDesignTips #FrontendDev #CSSForBeginners #WebDevInspo #CodeSmart
0
0
0
0
Wide screen case. One big image on the left, two small articles with images on the right.
Narrow screen case. The two article elements have moved below the big image.
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.
codepen.io/thebabydino/...
Thanks!
#CSS #flexbox #layout
6
1
3
0