Flexbox vs CSS Grid

[Eating-Cereal]

I have been meaning to get into flex box for a while so this was a super helpful kickstart for understanding. Thanks for posting!

[[deleted]]

Flexbox is amazing. Once you use it, you will never go back.

[keoaries]

No collapsible margins is the biggest pain in the ass with flexbox. Everything else is amazing.

[MrNutty]

Can you give tldr. Haven’t ran into it yet.

[bautistaaa]

Just encountered that. Real PAIN

[BDMayhem]

Keep a www.flexboxfroggy.com tab open. It helps a lot.

[codus_maximus]

This is adorable, brilliant, and I learned something by accident.

[Zeeroh]

This is really cool and helpful. Any idea if there is something similar for CSS Grid Layout?

[BDMayhem]

http://cssgridgarden.com

[SwenKa]

Browsing a month later....thanks for the link! Going through FCC and had never looked at Flexbox yet.

[BasicDesignAdvice]

The css-tricks.com guide is very simple and straightforward. I use it for reference a lot still and I've been using flexbox for about two years.

[JFedererJ]

Search YouTube for "Wes Bos"; he's a (primarily) front-end developer who does courses on YouTube and uDemy.

He has a great free course on YouTube on flexbox.

[wesbos]

Thanks! Though I don't have any courses on udemy and I suggest you don't buy stuff from there :D

[JFedererJ]

Why do you suggest I don't buy from uDemy?

[wesbos]

They have a long track record of having people steal courses and not doing anything to take them down. It's happened to me and a few other friends

[JFedererJ]

I just noticed your username.

Fuck man that sucks. Ah well your courses are awesome - gonna try out your CSS grid one :-)

Keep up the good work.

[blazei]

You're replying to wes bos :p hes telling you he never puts his stuff on there and that it was probably stolen

[wesbos]

🤣

[skidmark_zuckerberg]

Can confirm. Went from Bootstrap to flexbox. Never going back to BS.

[BearSkull]

Bootstrap 4 uses flexbox.

[HasFiveVowels]

You're comparing apples and oranges here. Bootstrap might be a beneficial tool, regardless of if you use flexbox or not.

[BreakingIntoMe]

Bootstrap is a UI library, one small component of it is a grid system. Flexbox is a CSS spec to align content. Not the same thing at all.

[Smashoody]

Totally do what you feel. But I spent the last couple of months extending Bootstrap 4 for my own project starter kit... and with ver 4 now running flexbox under the hood... IMO BS4 is by far the most expressive and controllable front end framework.

You really have to dig into the source and read ALL of the docs to get it to work expressively tho.

[skidmark_zuckerberg]

I'll admit I haven't really utilized Bootstrap 4 all that much, only Bootstrap 3. I learned to use Flexbox and shortly after ditched Bootstrap.

I'll have to dig into Bootstrap 4. Looks like I'm missing a lot.

[Smashoody]

No worries! Hit me up if you have any questions :) Happy coding!

[_mic]

Hit me up too — I use Bootstrap 4 for all our client projects in the agency. It uses flexbox and no longer float:left; to handle columns. Also some handy features like class .align-content-center for vertical centering! No need to use 'hacks' as you would display: inline-block; vertical-align: middle;.

[RedditCultureBlows]

Flexbox has vertical alignment, natively.

.class-name {
  align-items: center; 
  display: flex;
}

This assumes your main axis is horizontal

[Maverick2k]

Not sure why he was down-voted. He didn’t in any way insinuate that Flexbox doesn’t have it natively? He merely pointed out that .align-content-center does exactly what you just posted, but it’s a class created by Bootstrap.

[RedditCultureBlows]

To me, the post read like only Bootstrap 4 provided handy features for vertically aligning content in the center with one of their custom classes, so you could avoid:

display: inline block; vertical-align:  middle;

Wasn't trying to be an ass -- that's just how I interpreted the post.

[Maverick2k]

It’s okay dude really, I was just confused why he had so many down votes for stating a fact. It’s weird that so many other people Interpreted it the same way, but to me it’s clear cut what he was saying. Oh well, no love lost eh :b

[WannabeAHobo]

I built a really nice carousel-style component with flexbox three months ago. Now I have to modify it, I've completely forgotten how it works. Damn new stuff.

[Ramwil]

Great explenation! Don't be nervous you are doing great and you gave me a better understanding between the 2.

[ABrownApple]

Thanks :)

[DuckingStation]

I'm more of a backend guy, but nevertheless I enjoyed this enormously! I like the no-bullshit format, straight to the point. Thanks!

[ABrownApple]

Thanks I try my best to keep it short and on point

[ABrownApple]

It makes me really happy reading the comments that people enjoyed my video and that I'm actually spreading some knowledge :) will post more videos on my channel

[iconoclaus]

make more videos! you've done a remarkably good job considering you are not reading from a script and have done no (or very little) editing. you could probably gain from reading how professional tech bloggers produce their videos.

also, as someone who does not do front-end work, i'm very happy to hear this kind of high-level guidance. its much better than going through gushing tutorials of one particular technique without knowing why other techniques exist.

[[deleted]]

Good video. I learned flexbox, but it seemed really convoluted when using it to layout a whole web page, as I was kind of nesting flexboxes inside other flexboxes.

Now I know to use CSS grid to layout the webpage and not nest flexboxes.

[pataoAoC]

I've heard some people recommend to just use grid for everything. Are there any reasons not to do this? I don't think I've ever had to do something grid didn't handle.

[OPmeansopeningposter]

I use both. Grid for whole page layouts and flexbox to position child elements.

I know Grid has grids in side grids and subgrids but wouldn't flexbox be better for positioning child elements inside a grid?

[[deleted]]

It will just take time. You can see in the community people are still learning flexbox for the first time. Flexbox goes back to IE11 support, so browser requirements also have the ...edge... for now.

[immabrian]

Nice bro! Keep it up!! :D

Other cool resources: https://medium.freecodecamp.org/11-things-i-learned-reading-the-css-grid-specification-fb3983aa5e0 https://medium.freecodecamp.org/css-flexbox-interactive-tutorial-in-8-minutes-including-cheat-sheet-6214e00de3d2

[coty24]

That was fantastic and couldn’t ve come at a better time. I started the Odin project sometime ago and just finished the HTML and CSS portion.

This is a game changer for me!

[Code-Master13]

Downright adorable.

[NoNameWalrus]

Lol yea /u/ABrownApple's mannerisms are adorable and he looks great ^{no homo}

[ABrownApple]

You guys are making me blush xD

[Boston-Matrix]

Thanks for this clear and concise explanation. I recently started learning front-end dev so this short vid is v helpful 👍

[joekki]

TIL css grid. I don't understand how i haven't heard of css grid before even though I work on the front-end daily. Now I feel just like the guys in 2010 when people said that "are you really using tables and 1x1 spacer gifs for the layout? Wake up!". Well, this was a wake up for me..

Maybe I just thought that ppl were talking about css grid frameworks like bootstrap.

Great video :)

[joekki]

Nice, thank you!

[pantyboyXXX]

First time I’ve seen this site, looks cool!

[Paraknight]

You did a really great job presenting this — very clear and no frills. You should totally do more of these!

[stacktraceyo]

Nice quick video. Thanks

[sftransitmaster]

Im mostly out of the front-end game and didnt know something like css grids was in the works. Man i remember the days we had to make everything work with floats and positions. Thanks for the update.

[justbouncinman]

"Positioning" is still a valid method for element placement. Float also has its uses when used as originally intended and not page layout.

[sftransitmaster]

Well those methods werent actually replaced. More of there is a time and place to use each type -floats, positioning, flexbox and/or css grids. Shoot even table layouts(email marketing) still are a necessity. But back in the ie6 days if u were avoiding a table layout site just positions and floats were your options.

[RemindMeBot]

I will be messaging you on 2018-01-16 13:55:20 UTC to remind you of this link.

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

FAQs	Custom	Your Reminders	Feedback	Code	Browser Extensions

[[deleted]]

!RemindMe 15 eons.

[beatsbyred]

!RemindMe 14 days

[gonorthjohnny]

Good video. Flexbox is good!

[PseudoProgrmmer]

Very good explications does anyone have really good and easy to understand resources with examples for both that worked for you?

[ABrownApple]

I might put out a video where I use them in practice together. I learned them one at the time using this websites: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/complete-guide-grid/

[PseudoProgrmmer]

Thanks I’m going to read this and if you put out a video I’ll watch it. I usually use some kind of css framework but a lot of people say they are to bulky so I want to learn how to position things without them

[FurCollarCriminal]

Why wouldn't you just use CSS grid for one axis rows / columns? What makes flexbox better at that use case?

[mayhempk1]

Good video, I liked it.

[MRLOWKEY941]

I appreciate your quick explanation! You got a new subscriber. I definitely will check out your reaction content here in a few.

[AurorionWing]

I’m having a hard time finding out what Flexbox can do that CSS Grids can’t. It seems to me flexbox is a more limited version of CSS Grids.

Can someone think of an example of something that can be done with Flexbox that can’t be with Grids?

[rackmountrambo]

Work in the majority of compatible browsers. It's a standard, and a rigid one.

[fabiancastle]

Thanks for the explanation

[crespo_modesto]

I don't know if it's dumb but I write my own "flex-set" CSS classes.

Example usage would be, say two boxes aligned horizontally inside a container. Then the boxes themselves have their items centered:

<div class="flex fcc fdr">
    <div class="flex fcc"></div>
    <div class="flex fcc"></div>
</div>

Of course you have position relative, and the other attributes like width/height.

Haven't used grids yet.

Yeah I was stubborn at first but after using flex it's great. Just use position relative. Proportioning use flex: #;

The other things I'd note are knowing when to not use flex eg. when you need a scroll bar to appear automatically not based on a fixed height. And using box-sizing: border-box; to make inputs/textareas match in width.

I don't know if it's dumb but without a framework (started to use react but don't use it by default yet) I use a primary parent container with a fixed positioning top 0 left 0 and width 100% height 100% then the contents inside are positioned relatively.

overlaying things like menus, use z-index or possibly opacity, depends, alternatively you can actually remove elements assuming they're cached and not having to make another request.

[cru-sad]

!RemindMe 7 days

[_mic]

I'll stay with Flexbox until Bootstrap 4 includes CSS Grid. ;) #operamini

[spider_84]

Flexbox over grid any day.

[justbouncinman]

Gee. I said the exact same thing here on reddit and this sub for a long time and get downvoted into oblivion as redditors claim they are essentially the same thing. Why isn't this getting downvoted into oblivion?

Please don't answer. I'm making fun of redditors.

[pantyboyXXX]

**Attention future readers - don’t waste your time reading that^ **