Understanding flex-grow, flex-shrink, and flex-basis
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! ❤️
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)
@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.
Except, I keep trying to escape out of Insert mode on #freecodecamp. Slight inconvenience to be aligned with the perfection that is Vim.
> 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.
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.
Publisher: Dzhavat Ushev
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet
I'm quite a FrontEndDev rookie.
So if anyone wants to give constructive criticism, I'll be happy to enrich my knowledge.
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.
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?
(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.
🆕 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: […]
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.
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.
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.
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.
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:
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:
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.
One would think positioning in CSS should be simple/foundational - and it's definitely the latter but often not the former.
“It’s about time we change our mindset and take the full potential of modern CSS.” — Ahmad Shadeed
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.
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
Der Kurs wurde für diese Neuauflage komplett überarbeitet, aktualisiert, gestrafft und um neue Inhalte erweitert.
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:
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… 😅