Responsive Flexbox Layout Page in 4 Minutes | Flexbox Tutorial

[@WHATMrGK]

This is literally the only video that shows you how to actually build a functional web layout, all other videos just show you the commands. Thank you!

[@AberrahimCoder]

@@akhan3330 flex-grow: 1 , it makes the item grow to take the additional space

[@jigneshnakrani9585]

This is not a way to teach.... doesn't explain any basics of what flex means

[@adaml1203]

Thank you for producing this. A little constructive criticism. It would be more helpful to newbie’s if you explained what and why you chose these tags/css values as opposed to us just watching the code be written. You could have just as well posted the html and css in its finished state for us to consume and it would have had the same effect. Those that understand this stuff would be intrigued, and those that don’t, would still be scratching their head.

[@csscoder8892]

Thanks for the feedback. It was created days earlier when we were new to KZbin, in future we will definitely consider this.

[@ashhalverooo9471]

Thank you bro, because of you, my assignment is done

[@InnovatorsTales]

wow just wow, subscribed immediately

[@mina399]

my thoughts exactly :P

[@FallenSmile29]

Amazing ! Nice way to practise your understanding of flexbox. Thank you. I will definetely watch your other videos on channel.

[@csscoder8892]

Thank you

[@Mr.man712]

@@akhan3330 late but the numerical value of flex determins how much it will grow compared to others unless specified. It goes flex grow, flex shrink and flex basis with " flex" being the short hand for all three. I assume the 100% is for the basis? Im new to this tho

[@Dranzer10HD]

thanks for the emmet abbreviation :)) didn't know about it

[@csscoder8892]

My Pleasure Brother 👋

[@appronblue8421]

It doesn't work, could you please share a sandbox link with the cod in it?

[@andrzejvlasov1689]

Lots of magic in this video :)

[@talhaayub2172]

That's more helpful! Subscribed immediately

[@romansarmientogomez2372]

Sos groso, Sabelo!!!!!

[@whitecannon2185]

This content helped me lots!!!! Thank you

[@csscoder8892]

Glad it helped!

[@LodhiCreates]

How to fix multiple elements in flex layout like heading paragraph and images

[@sadaffarhan6751]

This is awesome sir

[@sc00b55]

Got a web design assignment due you really helped bro

[@Mike-kz4cy]

Did it work bro?

[@Mike-kz4cy]

I typed everything on html exactly as he did and nothing is showing up

[@codecrumbs]

Great video buddy

[@csscoder8892]

Thanks Mate 🙏

[@lienbarraquio1104]

How do you put images, text w/links inside those boxes?

[@oasteadomnuluibucovina]

It doesn t work

[@vasudevan2917]

How your two asides are places side

[@dhruvrajsinhjadeja-vfxarti3085]

superb :)

[@csscoder8892]

Thank you

[@nextrealm]

leave the source code in the description section mate. It will be really helpful to save it for later also so that i can revise.

[@hebrewman100]

Please help, how can I make that aside1 will jump above main instead under when window bocomes smaller? Thank you.

[@carlosarangovelasquez7101]

how can someone dislike this? brilliant!

[@csscoder8892]

Thanks Brother for appreciation

[@6BEEP9]

Because it doesn't go in depth, nothing is explained, just shown. I know there are different types of learning and this might work for people, but most people like it being explained.

[@rastasouljah872]

Well Probably the same reason i did, annoying music & unless you have a really good connection the text appears at too low a res to be able to read and no voiceover explanation, so ends up being just a useless video with really annoying music, no offense just giving a blunt answer.

[@HalleKebede]

i was almost done but "order " won't work. i can't get aside 1 and aside 2 to align on left and right column

[@mathildastorm2562]

I had the same problem, in css .main i missed it should be: flex: 3; and NOT order: 3; hehe..

[@josejimenezastorga1449]

Maybe is too late, but you should check out the wrapper section, it had to have "display: flex;" to worked correctly.

[@appronblue8421]

same problem here

[@victoriabarrientos7314]

I cant either, did you solve it?? Im gonna lose it over responsive flexbox

[@zalexstudios]

Thank you! Nice!

[@chanhpham4576]

Can I use .wrapper > div instead of .wrapper > * if I just use div tag inside wrapper ?

[@AnilMakkar9]

Yes, it can be done only if you are pointing to direct div elements of wrapper class.

[@nikhilsinha2191]

when i am setting flex to a item in container its disappearing

[@lgoogleame]

How to hide one element when the screen is for mobile? instrad of showing 5 divs only show 4 for example. But when the screen is for a desktop i want to show 5 divs

[@csscoder8892]

Use media query

[@peeyar2000]

How can I stack like header, aside1, aside 2 , main and footer when we decrease the size (mobile or tab) ? On web, it should be like the above one (header, left, main, right, footer at the bottom.)

[@vasudevan2917]

I copied whatever you said but i don't get the layout. 😞

[@csscoder8892]

@Vasu Devan Soory to hear that, the video is 2 3 years old so kindly check it out again with more keen observation and check out the comments box, may be other also face the same issue as you

[@trevorarmstrong6641]

use your words my g speak to us

[@BeingDeveloperWithAB]

What is the VS code theme are you using

[@florenciagrasso6109]

What does .wrapper > * means?

[@csscoder8892]

* means all elements, so all elements in .wrapper class have zero margin and padding

[@ellsonmendesYT]

select any direct children of element with class wrapper

[@nanakwesiasante904]

I tried .wrapper>* and nothing happened can someone please help me using vscode

[@ali-celebi]

Brilliant!

[@shiuandai0426]

thank you!

[@csscoder8892]

You're welcome!

[@decfathani1144]

you're using flex shorthand for a '.main'. when i change a shorthand 'flex' to flex-grow for a '.main, a page doesn't align correctly as i using a 'flex' just like it's show on the video. as i know flex is a shorthand for a flex-grow, flex-shrink, and flex-basis

[@the_marketoonist]

Same

[@zomssingh8744]

Yea.. confusing

[@EX1L3D_L3G3ND]

For anyone trying to understand, flex: 1 means {flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}

[@mfo6943]

Hi thanx for dropiing this video can u also make video on explaining the role of pseudo elements or u can suggest me by providin link in comment. Btw am your one of follower from your IG

[@csscoder8892]

Thanks Mate for reaching out, Hit me with a DM on Instagram

[@shadmansudipto7287]

Next time, please provide the code in a github repo.

[@jaipe5]

Genial. Un fuerte abrazo.

[@csscoder8892]

Glad you find it helpful

[@jcare07]

Excelente! 💪

[@zomssingh8744]

Layout is good but at the end it is confusing. So please start explaining the things

[@Matthew-thl-travel]

Perfect

[@shokintouch348]

Great, release more videos please, Thanks

[@csscoder8892]

Started today.... Thank you

[@sadaffarhan6751]

Who else dislike this

[@RogerHolden]

I know it's a quick demo, but you shouldn't have multiple H1 tags in the same page.

[@csscoder8892]

You are right 👍

[@annaboegh9910]

Thank you so much! do you have a tip on how to get the white border away so it fills the screen 100% in all directions? Thanks so much!

[@khanayan-v7z]

@Gamer Dahman And can you tell me that why I have some overflowing X white space on my responsive layout?

[@khademmilad]

awesome

[@BeingDeveloperWithAB]

its good example but you fixed height of header and footer and even main, which is not goo way to design layout.

[@nickx8951]

@media all in does not work

[@csscoder8892]

Use @media screen only

[@Kamil505]

is the source code on github?

[@csscoder8892]

Nope but will upload soon

[@DavidG-vo4vx]

Why isn't the header and article on the same row?

[@EX1L3D_L3G3ND]

Because header has a flex-grow of 1 and flex-basis of 100% so it is taking up the whole screen

[@adrianodemoura]

muito bom, me salvou (y)

[@masterkhoa]

there is a lot of things here that seem weird to me, first of all what is that "aside" tag, I have never seen those before. you use "wrapper" instead of "container"? I thought wrappers are for child elements inside a big container?

[@Dawid-lb8fe]

It's just a class, the name of it doesn't matter :)

[@roctanweer2265]

Aside is one of the semantic tags in html It's new way to write html doc

[@kaminisaini7922]

Nice

[@PrashantTechment]

Can you explain also then it will be very helpful. Thanks 😊

[@khawlaalali9673]

Brilliant Idea. But I didn't got the same order. Could anyone help please ?

[@khawlaalali9673]

I solved it. Notice for aside part there are 2 classes aside and aside1 ;)

[@John-wx3zn]

Thank you

[@gvanshalaj478]

Thanx bro

[@NoobPro-sh8qo]

Thanksss

[@csscoder8892]

Welcome

[@Mike-kz4cy]

Hey there bro,I just typed exactly as you typed the html and it's blank

[@csscoder8892]

U have missed something

[@Mike-kz4cy]

@@csscoder8892 cool,I will check it out, thanks for replying.

[@Mr.man712]

Whoa had no idea you could do a peroid as a shortcut for faster coding.

[@TheHumanistX]

I thought maybe they had some nice extension... nope! Works in my VSCode! This is gonna be such a time saver!!

[@elpapito24529]

R.I.P my right ear where I had a headphone at the start of this video

[@csscoder8892]

Sorry dear

[@elpapito24529]

@@csscoder8892 lol still great help Short and helpful

[@giakhanhho741]

is it mobile first?

[@csscoder8892]

Desktop first

[@giakhanhho741]

@@csscoder8892 could you please make a video about mobile first?

[@parvezmansuri7784]

Mu main kya dahi jma rakha hai kya🤣🤣

[@henryeng1649]

Why the aside class have to be class=aside aside1 why not just aside1?

[@RighteousNacho]

Sigh...commentary would be nice.

[@waqasalam_007]

Add imgand content then it goes unresponsive

[@qawiyrasyidrafi3103]

yoo in android it didn't work

[@csscoder8892]

I respect your opinion, but it is a web based layout

[@qawiyrasyidrafi3103]

@@csscoder8892 it allredy work for me, i just forget to apply the thing insaide the sorry, and thanks

[@csscoder8892]

Pleasure, you got it.

[@VijayBabuKatta]

Bro try to explain the subject and video, This video only use for copy righters

[@I_am_very_lucky.]

It doesn't work properly waste my time😢

[@kevinfuentes5018]

cool

[@csscoder8892]

Thanks

[@robinrapbor463]

Ufff atleast give with the explanation rather than the boring disturbing background music

[@csscoder8892]

Sure for next time

[@abhinavsingh-zc2hk]

don't use pix in 2020 :(

[@thechoosen4240]

Good job bro, JESUS IS COMING BACK VERY SOON; WATCH AND PREPARE

[@anthropomorphicOrange]

No, he’s not.

[@emilhuseyn6158]

Very short

[@mohitbirla6935]

bhai kuch samjha bhi deta

[@smikkelbeer7890]

Nice cancer intro

[@VijayBabuKatta]

No use for this video for actual learners

[@Gaamaa-oz5ef2lf3n]

Total waste without speech. Try your best next time with speech.

[@csscoder8892]

Sure

[@csscoder8892]

Thank you for feedback

[@Gaamaa-oz5ef2lf3n]

@@csscoder8892 All your videos are wonderful, but think of us the beginners. Wavering thoughts, no focus at one place. Too much of videos calling us to watch. At this situation, when your wonderful video has no speech to hold us on the subject. We may skip it... So please add your voice however it sounds, no issue.