#Flexbox

Understanding flex-grow, flex-shrink, and flex-basis
https://css-tricks.com/understanding-flex-grow-flex-shrink-and-flex-basis/

A great guide by @fonts, which has really helped me understand those #flexbox properties better.

It just solved a "hack" I've used previously in one of my flex containers, where the container shouldn't grow when content in it changed (hack: use position: absolute and another element within with position: relative).

Now, I just use:
flex: 0 0 <some-value> ✨

Thank you, Robin! ❤️

#WebDesign #WebDev #CSS #Layout #Flex

Irgendwann werde ich als #Flexbox-Prediger durch die Lande ziehen. Sie und CSS-Grids lösen einfach 99% aller Wehwehchen. 🤓 🤷‍♂️ #hallelujah #ADevsLife #CSS

Safariで画像が縦に伸びてしまう時の解決方法
https://qiita.com/kouz496/items/be477bc63cf27a013603?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items
#qiita #CSS #Safari #flexbox

Syntax Error's August issue comes out August 17th and will focus on #CSS.

Lucky for you, I'm better at debugging than graphic design.

I'll write about tips and tools that I use daily to debug my CSS.

Sign up now to get yours fresh from the print at https://www.syntaxerror.tech/

(PS. I'm really bad at marketing this newsletter so I appreciate all shares, boosts, toots and messages in bottles shared with colleagues and dev friends)

#debugging #debug #webdev #frontend #flexbox #CSSGrid #newsletter

got the wrong side of the bus schedule so i'm sitting at this stop thinking about how #flexbox is the best thing to happen to #css since ever and also how i'm basically using #bootstrap as a flex-and-margin convenience wrapper now

@zachleat This one by Josh W. Comeau: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

It helped me understand how #flexbox works and that in turn enabled me to build way better stuff in the frontend.

Holy crap! I couldn't comprehend #CSS #flexbox and flexbox wrap until someone explained "nowrap," which I know from #Vim. Now, it all makes sense. Vim is everything; everything is Vim.

Except, I keep trying to escape out of Insert mode on #freecodecamp. Slight inconvenience to be aligned with the perfection that is Vim.

https://dev.to/coderamrin/3-ways-to-center-a-div-horizontally-and-vertically-220n - #CSS horizontally and vertically #center a div: 1. #flexbox, 2. #CSSGrid, 3. old-school. Nice quick post https://github.com/Coderamrin.

How to create a #responsive grid system with #CSS #Grid | Go Make Things

https://gomakethings.com/how-to-create-a-responsive-grid-system-with-css-grid/

> I recently updated the grid system on my site from #Flexbox to CSS Grid. Today, I wanted to share how to use it, how it works under-the-hood, and why I made the switch. Let’s dig in! A responsive grid system My websites tend to be pretty boring. Years ago, I decided to prioritize simple readability over flashy features, and that seems to resonate with a lot of people.

Sharing my work to keep me honest on this project. Just a tiny bit of progress tonight - fancier looking profile cards. Mastodon is going to come out with this feature before I can even preview it for y'all. 😅

#CSS #FlexBox is amazing, by the way.

And @rachelandrew was right: being able to refer to #grid makes some aspects of #flexbox much easier to explain.

Now working on the #css #flexbox chapter that I wrote in April or so. It needs to be revised a bit, mostly to make the topic order flow more logically.

Whenever I need to work with flexbox, I use this amazing resource 😊 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ #css #flexbox

If you're someone who frequently forgets about CSS flex properties like me, you might find this VS Code extension helpful.

Name: CSS Flexbox Cheatsheet
Description: Open a flexbox cheatsheet directly in VS Code.
Version: 3.3.1
Publisher: Dzhavat Ushev
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet

#css #flex #devFront #FrontEnd #devFrontEnd #developper #tech #flexbox #vscode

https://voragine.net/link/a-complete-guide-to-flexbox

I'm quite a FrontEndDev rookie.

So if anyone wants to give constructive criticism, I'll be happy to enrich my knowledge.
https://codepen.io/carlogr/pen/YzJgbOa?editors=1100

I tried to make a navbar menu with flexbox and min() function for gaps, without using justify-content.

The menu must take the full 90vw on mobile, and keep itself right-aligned with a 2.5em gap from tablet to desktop, avoiding queries, hamburger/kebab hidden menus.

Feel free to demolish it. I'm learning.

#flexbox #navbar #menu #css

The documentation for the flex utility classes turned into a nice learning resource for #flexbox https://developer.volvocars.com/design-system/web/?path=/docs/layout-flex--docs

Here's a knotty #CSS problem.

Is it possible to apply #FlexBox to <select><options>?

I want my options laid out in a horizontal line (which *is* possible) and to wrap to a new line if there isn't space (which I think is impossible).

Anyone cleverer than me able to figure it out?

See https://jsfiddle.net/edent/v2qeyfg8/1/

(Horizontal layout doesn't work on Safari.)

... and with the writing of the final example the #flexbox chapter is really done - in draft.

One more edit and I'm happy for now. Then His Tabness can go over it, and my publisher's editor as well, and then we'll see.

So there is an #a11y problem with #flexbox order.

It hasn't been solved, right? Have any suggestions for solving it been made?

I didn't look at this problem in 20 months or so, and stuff may have changed.

Responsive Yearly Calendar with #Flexbox #CSS

https://shkspr.mobi/blog/2023/04/responsive-yearly-calendar-with-flexbox/

via @Edent

🆕 blog! “Responsive Yearly Calendar with Flexbox”

This blog has a calendar showing my yearly archives. It was in a table layout - which made sense when I first designed it - but had a few spacing niggles and was hard to make responsive. Now, it behaves like this: The code is relatively straightforward. The HTML for the calendar looks like this: […]

👀 Read more: https://shkspr.mobi/blog/2023/04/responsive-yearly-calendar-with-flexbox/
⸻
#css #flexbox #HTML5 #responsive

Un playground pour CSS FlexBox.

https://www.flexbox.fun/app
https://www.flexbox.fun/app

#flexbox #css — https://links.kalvn.net/shaare/sefhgg

Temporarily withdrew from #btconf to lie down for half an hour and do some thinking on #flexbox and aspect-ratio.

today..
Marie learns #flexbox so she can make her website a lot better with it's upcoming rewrite
(originally I wanted to change it's layout, but it's becoming a completely new site xD)

I'm in the train to Düsseldorf. Old-timers who followed me ten years ago on the bird site know what that means: I'll be bored and tooting.

Have a question? Ask away. Especially about #flexbox, right now I have the entire simplified sizing algorithm in my head.

If you ever used a #flexbox flex-shrink value of 2 or higher, this would be an excellent time to tell me about it.

I'm about to write in the #css book that a flex-shrink value other than 1 or 0 is pointless.

Updated the #css #flexbox algorithm page with some notes about min-width and max-width, and especially that one tricky case where strange things happen.

https://quirksmode.org/css/flexbox-algorithm.html

Proven: if a #css #flexbox has a flex-basis and a smaller min-width, the flex-basis behaves as a width: it does not allow flex items to grow to their min-content width, something that is allowed without the min-width

But it's *not* the case that in the presence of the min- or max-width, flex-basis is always interpreted as width - the combination mentioned above is an exception to the rule that min- and max-width work as expected on flex items while leaving flex-basis and width behaviour intact.

@crocedev agreed, flex-box is the highlight of my CSS practices.

Previously everything was a div, now everything is a div with display flex-box.

#flexbox
#css

Day 82 of #100daysofcode was really good and immensely productive for me. Having a day off gave me the chance to take a lot of time for coding today. I started with #GitHub and #Git, then moved on to #Flexbox and positioning. I had an absolute blast playing around with all the new knowledge and can't wait to go deeper tomorrow. So far, the #Academind teaching style is simply great, and I am more than willing to continue with the course.

Wonderful. Wrecked my brain for an hour over an apparent #flexbox inconsistency, turns out I made a simple coding mistake.

@ppk this is why I refuse to learn grid; table layouts still take up half my brain

#flexbox #grid #css

Since I'm now writing #css #grid and revising #flexbox, there will come a time pretty soon where I'll have to keep both systems in my brain's RAM at the same time. That means there will be little room for anything else.

New cartoon: Wrap Battling
https://comicss.art/?id=77

It comes with a short blog post about flex-wrap: https://comicss.art/blog/#wrap-battling

#css #comic #webcomic #comicss #flexbox

SVGs seem to behave oddly in flexbox when doing some DOM swapping...(flex or inline-flex seems to be ignored by the svg temporarily, so e.g. a button with svg+text ends up vertically stacked rather than horizontal).

#webdev #flexbox #svg

The bug has to do with font-face, #flexbox, and overflow: hidden.

Most of the time, even if the text in a flex item with overflow: hidden and a local font is not being hidden, the image still renders with the text cut off (shown here with text-overflow: ellipsis).

Left is the original behavior; right is with my workaround.

As a backend engineer mostly focused on low-level networked stuff, #css has always seemed like black magic.

May I introduce you to Flexbox Froggy: https://flexboxfroggy.com

It's delightful and I actually feel like I understand #flexbox now.

Sheesh. I thought it was still Thursday. This week has been just a blur of #CSS & #Flexbox I think I managed to learn a few assorted things. Time to head out foraging & perhaps go mano y mano with a burrito. Happy Friday!

Pro web developer here.

To this day I still type "flexbox playground" into a search engine a few times per week. Never bothered to bookmark one.

#flexbox #webdev #design

Why did the #CSS "owl selector" go out of style again? I thought the whole problem with #flexbox flow using gap was the lack of exceptions you could make. So what changed?

#CSS #flexbox is awesome. With just a few lines of CSS, I could make this responsive header. It has two parts, a title and a date. The date never wraps, the title does but only until it is 10–20 letters wide, at which point the date is shown below the title.

@SaraSoueidan Oh yes. The #flexbox charter has about 70 illustrations, the other layout chapters about 80 in total, with #grid not yet written.

Ich hab zwar mittlerweile mit der tollen Hilfe von @viviana den Fehler behoben, aber eigentlich ist das so wie es aufgebaut ist, keine gute Lösung.

Im Desktop-Layout sollte es so aussehen:

A1 B1
A2 B2

Wobei A2 und B2 am oberen Rand aligned sein sollen.

Im mobilen Layout soll es so aussehen und auch das #HTML in der Reihenfolge sein, damit Screenreader etwas sinnvolles ausgeben:

A1
A2
B1
B2

Kann man das irgendwie machen?

#CSS #Flexbox #grid
@devnull69

I've made excellent progress with one of my website redesigns. I still have a fair bit of work to do but I've broken the back on the minimalist design. I need to do some #accessibility work next, especially on the regions as the way I've coded #flexbox, regions isn't currently working as intended. Not sure how I screwed that up ...

#flexbox geniuses: is there a way of saying "This flexbox should wrap, but should have at most two lines"?

I don't think there is, but I could be wrong.

One of the harder parts about #css is it's accumulation over time. It's one thing to go in and architect the system yourself, it's another to be thrown into an existing project where the code has accrued over time.

I ripped out a bunch of #flexbox and related code and replaced it with #grid and the dang boxes are aligning side-by-side now.

One would think positioning in CSS should be simple/foundational - and it's definitely the latter but often not the former.

#Design #Development #Evolutions
The guide to responsive design in 2023 and beyond · Responsive design isn’t about media queries anymore https://ilo.im/10tc2d

“It’s about time we change our mindset and take the full potential of modern CSS.” — Ahmad Shadeed

_____
#UiDesign #WebDesign #ResponsiveDesign #FluidDesign #Frontend #CSS #Grid #Flexbox #MediaQuery #ContainerQuery

Finally finished Flexbox Zombies!

#FlexBox #FlexBoxZombies #CSS

Le guide ultime pour comprendre CSS Flexbox selon moi (et j'en ai lu un paquet). C'est en anglais et relativement long, mais tout y est, mêmes les nouveautés comme la propriété gap ou les subtilités comme margin: auto.

J'ai découvert 2 ou 3 trucs que je ne connaissais pas alors que je suis un très gros utilisateur de Flexbox.

https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

#css #flexbox #tuto

Im dritten Teil der Serie dreht sich alles um die Gestaltung von responsiven Layouts per CSS:

Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid
https://pmueller.de/webtechniken-lernen-3-der-neue-kurs-ist-da/

Der Kurs wurde für diese Neuauflage komplett überarbeitet, aktualisiert, gestrafft und um neue Inhalte erweitert.

#CSS #Responsive #Flexbox #Grid

While we wait for browsers to implement the `text-wrap: balance;` #CSS property and value for text (pleeeeeease! 🙏), I may have created a silly — and probably sub-optimal — function to do it with HTML block elements:

https://codepen.io/nhoizey/pen/mdjbrVx

Tell me what you think!

But why? Just because a colleague needed it, we could not find a solution in pure CSS, and I like challenges… 😅

#Flexbox #JavaScript

⚓️ https://nicolas-hoizey.com/notes/2022/12/16/1/