CSS before Flexbox

Tried this popular rant.. She said let's get married 😕

html {
design: responsive;
}

I fucking hate frontend webdeveloping... It was all nice! Vertically aligning items using flexbox etc... But then God said, "let there be cunts who use unsupported browsers!"

FUCKING HELL I HATE IT

I am building a mobile site using flexbox. A senior dev came running to tell me that we need to support IE. Looked at him and said, "IT'S MOBILE!"

Going to do this the next time I review a frontend PR 😂

What you have done?

Just before you, my fellow system programmer, scroll past this, let me say this:

🍬 The web is actiually simple. 🍬

Both HTML and CSS is declarative. It's all easy when you understand the concepts, learn how to be idiomatic and quit trying to do that imperative bullshit in languages that aren't imperative.

HTML is simple. You know the boilerplate: doctype, head, body, that's all. Just mark it up and do NOT look at it before you end, mark it up as it were article or something. The appearance is up to css.

CSS is simple. You may even forget bem or rscss, you're already a skilled software developer. Use common sense and your code-splitting and naming skills you gained reading The Code Complete or doing software development for years.

Forget mockups. Forget absolute positioning, forget setting width and height in pixels. Go to awwwards, find some inspiration. Draw some buttons and fields on paper with your good old pencil. Then go and write some css. Feel free to steal some shadows and transitions from codepen.

Read about 8-pixel grid system. Let every element push away from others by setting something like margin: 16px; and whoops! You've just got fully responsive and got great vertical rhythm without even using media queries!

Oh my god, do NEVER set width and height explicitly! Type something like button { width: 120px; } and bang! The entire web page is broken. Quit that shit. Let it resize as it should. It will resize itself to fit its contents.

HTML is by default ready for your template engine. That's how you receive data from server — as server-side rendered, plain old HTML page. On the other hand, the form element is the most axiomatic and simple way to send the data to server. That's how you send it — as plain old GET or POST that every webserver can handle.

All of there are true:
1. It's easy to get great 100% responsiveness without media queries.
2. It's easy to align items in row, it's just one line of css. Maybe two, if you still want elements to wrap, but want to use flexbox:
.parent {
display: flex;
flex-wrap: wrap;
}
3. HTML and CSS are fast by default.
4. You don't need mockups to achieve great visual experience. Mockups is imperative, web is declarative.
5. You may not even need JavaScript to make great website.

Go on, ask me a question about web! I'll ready to answer everything.

Next time you write CSS

display: flex;

You're welcome!

When you want your flex container to become a rapper

FUCKING FRONTEND DEVELOPING PIECE OF SHIT.

Why the fuck does justify-content: center behaves differently on chrome, Firefox and IE?

JESUS FUCKING CHRISTMAS GET YOUR SHIT TOGETHER

I worked for over 13 hours yesterday on super-urgent projects. I got so much done it's insane.

Projects:
1) the printer auto-configuration script.
2) changing Stripe from test mode to live mode in production
3) website responsiveness

I finished two within five minutes and pushed to both QA and Production. actually urgent, actually necessary. Easy change.

The printer auto-configure script was honestly fun to write, if very involved. However, the APIs I needed to call to fetch data, create a printer client, etc... none of them were tested, and they were _all_ broken in at least two ways. The CTO (api guy in my previous rant) was slow at fixing them, so getting the APIs working took literally four hours. One of them (test print) still doesn't work.

Responsiveness... this was my first time making a website responsive. Ever. Also, one of the pages I needed to style was very complicated (nested fixed-aspect-ratio + flexbox); I ended up duplicating the markup and hacking the styling together just to make it work. The code is horrible. But! "Friday's the day! it's going live and we're pushing traffic to it!" So, I invested a lot of time and energy into making it ready and as pretty as I could, and finally got it working. That page alone took me two hours.

The site and the printer script (and obv the Stripe change as well) absolutely needed to be done by this morning. Super important.

well.

1) Auto-configure script. Ostensibly we would have an intern come in and configure the printers. However, we have no printers that need configuring, so she did marketing instead. :/ Also, the docs Epson sent us only work for the T88V printer (we have exactly one, which we happened to set up and connect to). They do not work for the T88VI printers, which is what we ordered. and all we'll ever be ordering. So. :/ I'll need to rewrite a large chunk of my code to make this work. Joy :/

2) Stripe Live mode. Nobody even seemed to notice that we were collecting info in Test mode, or that I fixed it. so. um. :/

3) Responsiveness.
Well. That deadline is actually next Wednesday. The marketing won't even start until then, and I haven't even been given the final changes yet (like come on). Also! I asked for a QA review last night before I'd push it to production. One person glanced at it. Nobody else cared. Nobody else cared enough to look in the morning, either, so it's still on QA. Super-important deadline indeed. :/

Honestly?

I feel like Alice (from Dilbert) after she worked frantically on urgent projects that ended up just being cancelled. (That one where Wally smells that lovely buttery-popcorn scent of unnecessary work.)

I worked 13 hours yesterday.
for nothing.

fucking. hell.

Okay so even at my advance 52 years of age, I still pull all nighters to handle emergency remediation projects, and clean up other peoples messes. I don't mind, I'm a geek, I get high on the challenge of fixing shit that is broken all to hell.

But tonight was different. Tonight has me raging.

I am tasked with renovating a website, and building a sister site to that main site as well. no bother, I haven't done any web dev in 15 years but I'll power through pulling 18 to 20 hours a day for a couple of weeks to get in the groove...

Little did I know... CSS is a pain in the ass to be sure, but FLEXBOX is total and complete bullshit.

I don't give to shits about all the fancy shit it can do, it can't do simple shit worth a damn. Fuck Flexbox, and anyone involved in producing that useless layout model.

The sheer number of idiots promoting that hunk of shit a solution that is to be applied to any task other than wiping my ass is astounding.

Fuck all you jerk offs out there posting your shitty mark up turds as if they are gold, when you know better than anyone it works, sometimes, then doesn't, and is so easy to break it may as well be called "Web Design Jenga".

I'm still tired as hell, and tomorrow I will go back to slogging through CSS as the layout method, but at least I feel a little better now.

Oh and before I forget FUCK YOU FLEXBOX you piece of shit.

when you forgot your clearfix

(thank you flexbox!)

Fuck all these CSS frameworks using Jquery as their dependency. Cross-browser my ass.

I am going full flexbox.

!rant

I love flexbox! It's so much better than using floats :)

Flexbox ❤️

It's 2017.

Why is vertically centering a div still so stinkin hard?

Yeah yeah ik what you will tell me, "use flexbox".
Well guess what,. I HAVE BEEN TRYING TO FOR THE PAST 6 FUCKING HOURS!

I've gone as far as to copy code from 20+ different websites advertising working solutions. My tab bar looks like the fucking rockey mountains!

My main problem is that flexbox on chrome is not accepting ANY % values.

Now if you'll excuse me, I need to go kill myself. YAY! 🤗

GO FUCK YOURSELF BY A CRAZY PONY SAFARI !
Fucking useless browser that hide by default the fucking dev tools.
And also it fucking supports flexbox but can't fucking calculate height 100%.
Fucking fuckitty fuck.
Have your website with a shitty ui then. Might as well do a popup saying "switch browser" cause even IE manage to understand height:100%.

Completed Flexbox Froggy.

Finally Learned FlexBox , would recommend it 100%.

From: flexboxfroggy.com

Flexbox is how God would have written CSS.

FUCK SAFARI!!!!! I am developing our new company website and have a deadline tomorrow. It is built with flexbox WHICH SHOULD WORK EVERYWHERE BY NOW. The new website works FINALLY GREAT in all browsers now and then I just tested it in Safari (which I did not do before) on my mac and SO MANY THInGs doNT WORK! WHATTA FCUK?? I EVEN GOT EVERY THING TO WORK IN EDGE?? Is safari the new explorer?! What happened?!

trying to use flexbox when you have to support IE. fuck IE. fuck it. fuck it in the ass with a rusty pipe.

I was thinking about using Drupal for project, just to try out a CMS. Before using it, I decided to search devRant for "drupal" to see how bad it is.

Nope, I am just going to use plain old VueJS with flexbox.

Tl;DR; version:
French designer, Mexican PSD -> HTML converter, Indian VueJS developer, Spanish project manager and a Taiwanese back-end developer. Application was made like an tower of pizza from bullcrap held by boogers and constantly licked by an orangutang to keep it standing.

Longer version:
We had to take a "half-finished" project from one of our clients, received the code for full-stack project. The css/design was so unbearable that it mostly broke on anything that had higher than 720px wide screen, structure was full of tables/divs and no fucking flexbox/grid... Then the fun part - we saw it's conversion to vueJS - a single fucken App.vue file that had shitton of conditions for pages.... yea, not even multi-component/routed app, just conditions!!!! And then... A back-end (in which I mainly specify myself) - it was made by a developer that had to mainly use Java/C# as their daily driver while all being build on php and Laravel. 0 Fucken laravel functions used, 0 of models, logic and so on.... Most of the page was running on RAW sql queries. Names... Oh my god the function names....
`getTheUsersThatHasAtLeastOneSpaceAssignedToThemByGivenCompanyId(int $id)`
And it held an RAW sql that was coming from a model....

All of this was managed by a random spanish manager who couldn't really understand what our client needed and what he actually wanted so from 100% of the site, only 20% was correct in logic....

And yet, according to the whole "package" (team) - they did everything correctly, saw no issues and our client was ungrateful fucker that refused to pay 10x the amount that we asked in order to completely re-do the application....

Morale: Remote teams are great... As long as all of them can work remote in TEAM.

Why the fuck can't a fieldset element be a flex container?

I wanna fucking kill someone.

When you realize safari does not support flexbox...

I dont fucking care if you dont like CSS Grid or flexbox Im not going to fucking CHANGE THE FUCKING ENTIRE LAYOUT.

I hate that I love flexbox

Flexbox.. Where have you been all these years?!

When I initially started learning web development I remember thinking 'someone didn't quite think this through..' about centering block elements etc in the dom. Those days are now over, I still believe in miracles.

To all webmasters / web designers / programmers.
--------------------------------------
| Use flexbox or not? |
--------------------------------------

CSS is like #06

When using flex box, don't fucking use rows inside rows.
I learnt it the hard way.

If only it were that easy...

...

display: flex;
align-items: center;
justify-content: center;

Done!

😁

you cant use flexbox

Fucking jesus christ, for some reason in chromium-based browsers if you have a table that fills up to the full height of the parent using flexbox rules, if you go to print it, it will fucking

i forgor 💀

and give it a height of minimum content height. The solution is to ALSO give it height: 100%;

Google completely unhelpful (I guess it's too specific and most people don't write web services specifically made for printing out?) but luckily it only took me like 3 guesses to figure out on my own.

But I could have easily seen this completely pissing me off to the point of quitting. FireFox doesn't have this issue.

RELATED TANGENT RANT:

Why the fuck is the default to use headers, footers, margin, and no background images (colors) ?!?!?!? The default printing for browsers COMPLETELY FUCKS UP THE PRINT

God FUCKING damnit.

Decided to go flexbox despite issues with Safari 6 (global usage at 0.02%). The boss, its wife, a friend of them and a coworker NEVER UPDATED Safari on its devices and send tons of angry emails with captures of the broken site. This is the biggest 0.02% ever seen!!

Damn, CSS Grid and Flex are fucking awesome!
I've been using both at least a year now and with a handful of SCSS mixins they have made the never-ending misery of front-end bearable.

Before I was forced to use Bootcrap floating grid and it was just a fucking mess and in some cases made JS hacks necessary.

I love web development and web design. You can make something custom that looks great in a short period of time. Use the many frameworks to your advantage.

Also, for the people hating css, i get it. It's har sometimes but it's not that bad. Flexbox makes your life waaay easier.

!rant
It's been over a year coding professionally as a frontend Dev and it seems like I have built my career so far just by knowing flexbox.

(I'm a flexbox wizard now btw)

so, flexbox.

and my only question is: why did it take CSS 30 years to get the features which it should have had from the start? now because of that, even this awesome thing is messy due to how the old features collide (or don't collide, i'm not entirely sure tbh) with it.

but maan, flexbox! now at least a part of css feels like a tool made to solve the problem it's supposed to solve, instead of layers of hacks that you can somehow hack into having the side effects which result in it doing what you want it to do!

Open code html code

See flexbox with float:left 🤔
I need to talk with colleagues I think :/

New skill : Flexbox

Solving all my issues with flexbox because why not...

Have to redo my Flexbox supported site since most of the iPads are on iOS 8.

I don't understand why people use Float in CSS. I love to use Flexbox I think I use them too even.

For example:

I want to write some text.. Flexbox

I want to add a image and some text below... Hum Flexbox!!

So I can consider myself a Flexbox.

!rant
>tfw learnt css when flexboxes exist.
Never struggled with vertical alignment.

Internet Explorer decided to overflow something outside of a flexbox.
overflow:hidden suddenly makes Internet Explorer actually wrap the text, as it does in literally any other fucking browser.
> word-wrap?
< nah I'll ignore that.
> overflow?
< Oh shit, let's wrap the content!
Ugh, I really hope that people stop using this crappy browser in the next five years.

Ik I've said this before, but I HATE FLEXBOX!

FUCKING HELL!

Ok, back to work.

Flexbox will save all our lost hopes and dreams on the web.

Flexbox is possibly the greatest thing to happen to me

Flex makes life easier in css 😂
#nopositioning

I'm a fullstack dev, but this is coming from the point of view of frontend work in Rails 7. I'm using jsbundling-rails. I tried to get importmap to work, but that was fool's errand.

I absolutely love the module system in modern js. I love how closely it resembles the way python does things.

npm isn't the meme I was led to believe it is. I also don't need things like toString.js, so maybe that's why.

I also love using flexbox. It's so straightforward and I don't have to rely on hacks to do basic things.

Where have I been you ask? Over my head in paying work that never gave me the chance to update old but working code.

jquery and Bootstrap plague me from when I built these things years ago when they were needed to get things done quickly. My skillset and the technologies available to me have also drastically improved, allowing me to do things with fewer libraries.

I literally want to fight SCSS right now 😡

Working on a webpage. Using Flexbox for a 1-column layout. Now I need to display two Divs next to each other and I regret every lifechoice.
Why is it such an impossible task to put two divs in perfect alignment next to each other. Why oh lord have thou forsaken me.

Tested site with 🌘Chrome, 🌋Firefox and 🌐Safari, so far so good.. 👌
Time to pray to Microsoft gods before testing with ☠️IE11 & Edge

Fuck you Flexbox, wasted my time on you bitch.

!rant

I wish I could redesign the webstack. I mean, its fine in its current state, but could be soooo much better.

Having native support for web components and shadowDOM will be a good start.

Crossbrowser support for flexbox and removal of vendor prefixes.

CSS defaults for properties like margin and padding to be set to 0. (Basically reset.css or normalize.css)

I like the direction ECMAscript is heading in but I think some features that Dart has should also be ported ECMAscript. The simplified DOM in dart which looks like jQuery is such a breeze to use.

We can all the above currently, but its integration would streamline development.

After CSS Grid and Flexbox, I don't see the need for frameworks (except for utilities like margin and padding).

Change my mind 🙂

I thought I had a decent handle on CSS. I can use flexbox and grid to make some decent and responsive webpages, and I'm at least familiar with most of CSS's more common gotchas

But no.

Even in 2021, with years of improvement in the language and browser compatibility, CSS can still fuck you over

I was adding some margin to a div element, and I noticed that the div element's margin seemed to force it's parent to move down too, as if the margin was applied to the parent as well

It took far too many nearly nonsensical google searches to discover that CSS has a nasty little trick called 'margin collapse'

And in true CSS fashion, the way to fix it is a hacky workaround. In this case, if you add a padding of 1px to the parent, the margin collapse doesn't apply.

Fuck CSS. From its weird implementation to its hundreds of gotchas to its hacky workarounds to said gotchas.

Fuck CSS

That feeling when you, after a day of struggeling with that fucking front-end shit that is CSS and the alignment hell it brings, stumble upon a post about flexbox...

I'm making the assignment in full flexbox, they still using floats tho.

The cringe is never enough.

I fucking hate vendor prefixes. HATE.

Got some nice JS code? Well it's about to get ugly 'cause in our browser, the API needs some special name treatment or it feels offended.

Got some nice CSS?
You're welcome, it just grew 3x in size because "ugh, I ain't havin' the same flexbox as lousy Chrome over there! I'm special, I'm -ms-!"

Fucking bullshit.

Spent a couple of hours trying to figure out why my flexbox css wasn't rendering as suspected. Finally discovered that the html tag I tried to apply it to didn't support display: flex;

Gah.

Flex box, seems nice unless it doesn't wrap the row the way you expect

Chrome it's shit. I have been brainstorming in the CSS on a flexbox and its height of 100%.

My website works under Firefox.

The code to win tonight.

And you? You use which browser?

Damn you Chrome, piece of shit who doesn't support (without breaking completely the layout) the <object> tag inside a flexbox container. Wasted two hours of my life.

As a strong supporter of ditching anything other than pure css for layout, finding out flutter has an equivalent of flex box is making my private parts flex-grow: 20;

Is it good time to switch to CSS Grid Layout frameworks such as Blueprint CSS? How is good/bad as compared to Flexbox?

Ditch them completely.
In modern browsers you can emulate their behaviour easily.
They make your layout unnecessarily complex.
What the fuck am I talking about?

Tables in HTML. Fuck them. It may be just me and I still do not understand all of their defaults and when ti apply which style to which table element (thead, th, td...) but I found out that I can make almost everything with divs, flexbox or even some fixed widths or heights much easier to what I want than with tables.

Especially if you layout a complex scrolling component with static top row and static first column, it is nearly impossible with tables (and even without them you still need JS).

Ah, and fuck IE with a dirty trident. That thing can die in hell.

Just spent 30 mins vertically centering a damn image in a two-column Bootstrap row. Yeah, flexbox is great unless you want to stack the columns at mobile screen size like they do with Bootstrap normally. Then everything breaks and the original ugly hack just gets replaced by a slightly lesser evil.

I really hope that we sort this out somehow before colonising Mars.

On the newer side of web development. Using CSS Grid with some flexbox. Any idea on why my 768px media query styles are overwriting my 320px styles?

I was breaking into modules but moved everything to a single css file until I figure out what causes the issue. The mobile styles are at top and I started the medium breakpoint below the initial styles.

Designed it mobile first if that makes a difference. Should the media queries be nested?

Do you prefer Grid layout or Flexbox on CSS??

It's CSS quick maffs time! Consider the following code:

<div class='container flex'>
<nav class='menu flex'>
<a href='#'>Menu item 1</a>
(arbitrary amount of links)
</nav>
<button type='button'>Sign in</button>
</div>

You want the layout to look like a horizontally scrolling, single line menu with a Sign in button to the right. Both container and menu are flex containers. So, here's the code for the menu:

.menu {
overflow: auto;
}

The problem is, as there is no flex-wrap, menu will not be wrapped, and it will occupy all the space it's needed to accommodate all the elements, breaking its container. Pesky horizontal scroll appears on the whole body.

Boubas will set menu's width to some fixed value like 800px, and this is a bouba approach because bye-bye responsiveness.

Here's what you should do:

.menu {
overflow: auto;
min-width: 0;
}

.menu * {
flex-shrink: 0;
}

This way, menu will occupy exactly the width of an empty div. In flexbox, its width will be equal to all free space that is not occupied by the Sign in button. Setting flex-shrink is needed for items to preserve their original width. We don't care about making those items narrower on narrower screens, because we now have infinite amount of horizontal real estate. Pure, inherent responsiveness achieved without filthy media queries, yay!

The menu will scroll horizontally just like you wanted.

aight bye

So we have duplicate code because dumb devs thinks Bootstrap (4) is kick-ass for mobile. 😒 Can't do jack with their tables.

I told them to use Flexbox instead. Bootstrap (even 4) is antiquated and there's better options.

My recommendation is to use Flexbox Grid with React to build a modular living style guide with built in unit testing for styles and interactions.

Basically got told that my opinion is just an opinion and is the same as using Bootstrap. 😭

Anyone have some solid "facts" on Bootstrap I can use in the long run? We haven't even launched anything and we're already in technical debt because of this stupid framework decision. Someone please help. 😞

Just replaced a mess of a 6 row, 6 column grid done using bootstrap with 4 lines of CSS3 grid layout (shorthand).

Why do we even need full Bootstrap when ya got Grid and flexbox now? Oh right, .btn colours... 😖😫😭

To all who use CSS:
Do you vertically align using flexbox or some weird old hacky method? I just used flexbox throughout a personal project to find out it doesn't work on my mom's computer...
Sorry if this question is too serious for this, but it really bothers me :D

Why does header > div:nth-child(3) {
margin-left: auto
}

cause the right most item in a 3 item flexbox, to be shove right?

What does margin-left: auto do in this context?

CSS Grid or Flexbox?

I'm starting with native mobile development to create an app with a lot of potential.

Since I didn't know a lot about this field (being a full stack web developer) I started doing some research about what technologies I should choose.

The app, having the need to be cross platform, I needed a cross platform toolkit. Although the app could make a move on to truly native code (Swift + Java), it would take a long time; hence I would require a faster short term solution.

The best option was Xamarin (for native code). However, due to certain app requirements, I would have to write a lot of platform specific code; defeating Xamarin's purpose.

The next option was a hybrid mobile app. Ionic2 was the best option here but I don't like ng-2.

In the end I came upon the realisation that a web-app was the only true cross-platform solution.

As I delved deeper into mobile app development, I found out that the webstack lacked a lot. My conclusion was, that for a truly great (cross platform) experience, we need to improve the web domain.

HTML elements can become better (more XAML like). A native templating API, to forgo the need for libraries like ReactJS or VueJS.

Better layout models. Flexbox is good but can improve. CSS should be more like Sass/stylus.

And lastly we need a better way to make our web app dynamic. JavaScript is fine, but I like the way Swift/Xamarin work. It makes things more formal.

NOTE: These are just my opinions and I'm probably wrong in many places so forgive me.

CSS.... vertical centering back around 2000 before flexbox and frameworks

HTML- before we head css frameworks looked bootstrap. I am done make things pretty ..I make them functional

DAMN SHITTY MCFUCKFACE CSS FLEXBOX FUCKSYFUCK.
"Let's make this flexbox thing as unreliable as flexy".
My ASS.

having a hard time centering buttons children because firefox does not support flexbox in button element. :/

Should use flexbox in responsive web.?... i see it so hard to custom style on small screen...

CSS, I particularly don't hate it but i don't love it either. As a React developer I love JS but I don't really like CSS based UI development i mean it's not bad but just level of satisfaction i get with a running logical thing in JS vs creating some UI stuff with CSS does varies. So I want to improve my CSS skills. Anyway can anyone suggest in what topic order I should learn CSS, I can do some basic stuff with flexbox and sometimes with grid but I think I lack some essential concepts.

I'm thinking of making a design framework based around flex-box and some other modern css possibilities... Would any of you guys use a thing like that?

Any things you'd like to see in it?

Any recomendations of CSS framework? I'm currently looking at Bulma (for some reason Vue tutorials are using it a lot), but lacks a little bit in documentation.

What I'm looking:
- Minimal size
- Responsive
- Flexbox based
- Not material (please)
- Without annoying dependencies (OPTIONAL)
- Good or some documentation

<love> Flexbox is a woman. Except she does everything right for me. I love her! </love>

Sometimes I find solutions so ridiculous, I can't help but laugh at the hours that I put into finding them.

I tried to find a way to put space between items in a flexbox while they were in a row, but without leaving uneven space on either side of the elements when they wrap. After scratching my head for longer than I'd like to admit, giving the parent a negative margin and the children the same positive value allowed me to achieve this. (I would have saved a lot of time googling this, I know.)

You have just learned flexbox and how to arrange things in CSS. You can use flexbox without even looking at your notes or the web.

And suddenly you saw a tv displaying a web app which show a que number with off-grid looking style with small scrolling(not sized properly inside viewable area i.e 100% vh )

The OCD start.... Or your spider sense is tingling wanting to make the correction...haha

I recently joined a project team in my company whose client is a BIG (and I mean BIG) tech company.

We offer marketing solutions to the client. This means we create websites that showcase the company and all the good stuff that they do.

When I was going through my ramp-up meetings, my lead gave me some dummy projects to build just to get an idea of where I stood as a web developer.

So, it was one of those Photoshop mockups that were to be made entirely using vanilla JS, CSS3, HTML5 and nothing else.

There came many points where I had to align items either horizontally or vertically. So, I used flexbox to do it.

I submitted my code to the lead and while going through it, he commented, "Why do you use flexbox? It is no good. Use float instead." And I looked at him in utter confusion.

Tell me, is it wrong to use flexbox? Should I have used float instead?

Can I just start using Flexbox for my grid system now :/

I just had to reinvent tables with angular4 and flexbox to satisfy a design. actually looks a lot cleaner.

Flexbox is bae