CSS Flexbox Tutorial in Hindi | Web Development Tutorials #28

Подписаться 6 млн

Просмотров 1,2 млн

50% 1

► Source Code & Notes: codewithharry.com/videos/web-...
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutori...
►Click here to subscribe - / @codewithharry
►Checkout my English channel here: / programmingwithharry
Best Hindi Videos For Learning Programming:
►Learn Python In One Video - • Python Tutorial In Hin...
►Python Complete Course In Hindi - • Python Tutorials For A...
►C Language Complete Course In Hindi -
• C Language Tutorials I...
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials I...
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video...
►Django Complete Course In Hindi -
• Python Django Tutorial...
►Machine Learning Using Python - • Machine Learning Tutor...
►Creating & Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Developmen...
►Advanced Python Tutorials - • Intermediate/Advanced ...
►Object Oriented Programming In Python - • Object Oriented Progra...
►Python Data Science and Big Data Tutorials - • Python Data Science an...
Follow Me On Social Media
►Website (created using Flask) - www.codewithharry.com
►Facebook - / codewithharry
►Instagram - / codewithharry
►Personal Facebook A/c - / geekyharis
Twitter - / haris_is_here

Опубликовано:

7 янв 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 927

@bhau1843 Год назад

8:00 Flexbox(display:flex) 10:30 flex-direction 12:55 flex-wrap 15:20 flex shorthand(flex-flow) 16:45 justify-content 19:40 align-item 25:00 order property 26:30 flex-grow 28:00 flex-shrink 33:30 align-self

@mrchipsgaming1192 Год назад

29:37 flex-basics

@ColdCricketeEdits 10 месяцев назад

Thnks bro

@ketanraghunathraut7615 2 года назад

The best part is that you also provide entire code and notes.Even some paid sites dont provide such basic things.Amazing!! Keep making videos on web d!!🙂😊

@irfanansari6448 3 года назад

19:58 Log vertically center karne k liye marte hai. I really felt this.

@Pro_Gamer_Boys 3 года назад

Ha bhai😂😂 me bhi vhi sunke comment likhne aya tha🤠

@Nscb1947 3 года назад

No matter wherever you search a material to learn new things, you will always end up coming back to Harry. Because he is simply the best out here...

@mirzamohsinbaig6481 2 года назад

Bhai wo container ki height kaisa set karni hai

@Vedant-M 2 года назад

@@mirzamohsinbaig6481 container waale div ko target karke

@ShreyaPramanik2021 2 года назад

I learnt Flex-box from Coding-Ninja but I had a lot of doubts , after watching this video everything is clear now ...Code with Harry is really better than any other paid course.... and thank you so much bhaiya !!

@rexzo_842 2 года назад

Bhaiya 😂

@narendragolla6928 2 года назад

coding ninjas is not good right for web dev

@pawanthakuni996 Год назад

bhaiya bolna jaruri tha kya

@Somnath_Sahaa Год назад

@@pawanthakuni996 Bengali ladkiya Kam ho jaane k baad aisa hi krti h hai 😂

@kasifmansuri7552 Год назад

Shreya, What your review on Coding Ninjas as i am thinking to join. It will be very helpful to me.

@ashiskanu7101 3 года назад

It's make floating and positions less important 😂😂

@aryanbarodwal1844 9 месяцев назад

Yes

@MonkeyProduction619 9 месяцев назад

Your English is breaking my humour

@amitsaxena5210 Месяц назад

Yes

@coder134 3 года назад

the struggle he was doing when explaning space around was a real challenge

@ayushipatel822 3 года назад

i just got every thing after just seeing the gapping hahaha!

@mirzamohsinbaig6481 2 года назад

Bhai wo container ki height kaisa set karni hai

@kushalbatra7151 Месяц назад

No matter where I get stuck in my path to be a software developer, i come to code with Harry channel and everything is resolved ❤ great respect to you @codewithharry !

@codergirlkrishna286 2 года назад

Harry bhaiya sachi me mai vertically center k liye mare ja rhi thi😂 lekin aaj vo problem is video se solve ho gyi 😊 Thanks a lot for this wonderful series 😇😊🙏.

@aakashgoswami2356 3 года назад

One thing I wanna point out is that- align-item : stretch ; is by default not flex-start. Thanks for your lectures.

@MuhammadAhmed-jm1bs 2 года назад

The stretch value stretches the flex items to fill the container (ye bas default hota hai)

@projectsnik305 Год назад

Align Stretch is not working ☹️

@noorulain5093 23 дня назад

@@projectsnik305 "Align stretch" will arrange items vertically in the same way "space evenly" arrange them horizontally. So to arrange the items evenly in vertical position using Align stretch you need to have items in vertical position (which are by default in horizontol position) so first use "flex-direction:column;" to have items in vertical position and then distribute them evenly using "align-items:stretch" and see the effect.

@mashoodullah340 2 года назад

Given three hours to watch this vedio and try on my own whatever you taught... Superb hats off to you sir ..

@vikaschauhan-rv6fi 4 года назад

Guru ji mujhe pehle boht tough lagti thi ye sab cheeze... Par apki videos dekhke alag he confidence aaya h mujhme

@TheHarshGaur 3 года назад

Finally my flex box is clear. Most of the educators do not cover the whole set of properties. Harry did it.

@badaljha6257 3 года назад

If flex-wrap is not working on your system use max-width instead of width in flexbox-container.thank you

@Binod-cx5lj 2 года назад

that happens bro ignore.

@adefianon 2 года назад

@@Binod-cx5lj It wasn't still working for me bro.

@sudip4930 Год назад

Thanks bro

@wiwake Месяц назад

it does bruh ...

@wiwake Месяц назад

thanks

@steadywave7924 4 года назад

At first, Thank you so much for providing most of the programming series. superb bro, your all tutorials are awesome. I think you are one of the best programmers in the world. Some institutes are not teaching with such quality after taking money while you are teaching for free. So that any poor student can realize their dream of learning programming languages. And I am a big fan of you like you are a big fan of Picker and Emmit 😂😂😂 Again Thank you because I can learn everything about programming with you whatever I want to learn. 😊

@nitishdas1838 3 года назад

border: 2px solid black😂

@adnanbinalam2539 3 года назад

codewitharry fan where are you

@tenc6491 2 года назад

@@nitishdas1838 haha

@mchauhan7066 2 года назад

bro Html & CSS is not an programming language

@howareyou5043 2 года назад

Lorem34

@mr.curious1714 3 года назад

Best tutorial for CSS flexbox. Best free online resources for learning CSS flexbox. This is the best playlist for learning HTML, CSS and JS. One stop for all sort of web development courses. Really like it !!!!

@deepanshuchaudhary9875 2 года назад

The best part is he always starts writing the code from the beginning,, makes to feel much comfortable.

@jeffomega 2 года назад

Harry Bro there's no-one who could have taught it any better. Thank you for this series and also for doing it for society i.e. for free, it now even inspires me to do something for this society to make it better. Thank you very much brother.

@Moizoref 10 месяцев назад

this bot bruh

@zeno8237 10 месяцев назад

@@Moizoref fr bro 🤣

@deepalilohar687 2 месяца назад

I learnt CSS and html from your videos. All contents are taught in a very simple way all students can understand. Thank you sir...

@dips365 2 года назад

One of the best course to learn web development from beginning (Noob to Pro level)

@kumailkhan4139 4 года назад

Brother your teaching style is amazing hats off to you brother. please try to teach css grid and bootstrap as well if you can in this series and also if you can make the same playlist for PHP with SQL it would be a great help thank you for your efforts and time cant be expressed in words

@tanziyabanu.6154 3 года назад

The best tutorial fa beginners..I lost the hope that I couldn't learn before I started to watch.. once I saw ua tutorial now I think I can achieve..Nd Can become a web developer ...thank u so much harry

@malikkimemes559 3 года назад

this channel should be named codding with legend

@ShivamSingh-te9tl Год назад

*coding

@36_parthshrimali84 3 года назад

First of all thanks Harry Bhai...to explain it in easy convenient way💓 and hats off for who invented visual studio code and worked on developing CSS..

@manishverma4146 3 года назад

bro after long time spend watching videos on youtube you r one who clear my flex-grow, flex-shrink and flex-basis concept. Good job bro and Thanks for this video.

@thrilleracaste400 2 года назад

After all the research I did, I can now finally conclude that this playlist is the best playlist for the web development course. Thanks Harry bhai!❤

@thrilleracaste400 2 года назад

@Bilal Ali 🤣🤣😏🤫

@CodingGuide11 Год назад

bro pichle 2 vdo mei vi same comment tha

@thrilleracaste400 Год назад

@@CodingGuide11 Aage aur bhi milega😊

@CodingGuide11 Год назад

@@thrilleracaste400 okay 👍😆

@user-zh9fu4zd6z 8 месяцев назад

Bhai kaam k comments niche rh jate h pls mt kro

@multitech3793 3 года назад

"and i will see you next time" , best part for me in the video

@shehzad7361 3 года назад

Thank you sir.... for such useful contents. I never knew that I'll be able to learn web development in such a easy and effective manner. But it is going possible.. Because of you. I really like this style of teaching. Really incredible videos and awesome and effective way of study. i hope you'll never stop! So humble and well explained. I'm happy I found your channel. absolutely love to all of the effort that you put into these videos. Appreciate the work that you put into making these videos. Hats off to your dedication

@sktamim_01 3 года назад

I'm very thankful to you sir. I learned many of things from your video.Thanks for giving us so much for free. may god bless you. Sir You are great

@Sharim1234568 3 года назад

I really wish I had teachers like you in my school. Really appreciate your work. :)

@noorulain5093 23 дня назад

20:50 "Align stretch" will arrange items vertically in the same way "space evenly" arrange them horizontally. So to arrange the items evenly in vertical position using Align stretch we need to have items in vertical position (which are by default in horizontol position) so First use "flex-direction:column;" to have items in vertical position and then distribute them evenly using "align-items:stretch" and see the effect.

@abhaygupta7347 4 года назад

Harry bhai, you made the most useful part of CSS , crystal clear. Before watching the video , i was very much confused with flex box, flex box item properties ... 😍😍Thanks...

@Eeswar-hh5gz 7 месяцев назад

you are welcome

@730_diksha_pimple3 10 месяцев назад

Harry bhai, today I just tried instagram profile page using html and css. I didnt even know how to add a image but only because of you I could do this. It was not 100 percent perfect but I can say 80 to 85 percent perfect. I also got confidence that watching your tutorials I could do many more things. Thanks infinity. Hope to see more interesting tutorials from you. You are the best

@Eeswar-hh5gz 7 месяцев назад

@anant-strong 4 года назад

Please make detailed course on Data Structures and Algorithm those who want this please comment 🙏

@anujsharma1265 4 года назад

👍

@adityacheke4142 4 года назад

yes bro u r right please make courses on data Structures and Algorithm

@vishalkumawat9146 3 года назад

@@adityacheke4142 the course is there.

@honeysshorts_4118 3 года назад

yes please make

@geeli_puppy_. 3 года назад

arte bas karde mera bhai har video ma comment kiya hai bas karda na course ban chuka hai

@mdshadabirfan7404 9 месяцев назад

Now got the understanding of Flexbox. Just completed the lecture number 28. The video was very detailed and comprehensive. Thanks

@abdullahalhuzaifi5244 2 года назад

Harry Bhai your course(videos+notes) makes it very easy to understand every concept I when I look at the previous videos these are so much easy to understand because of your notes..Thank you very much for your precious efforts

@anuragverma7318 4 года назад

You are doing great job ....God bless you:-)

@ShivamKumar-ie1je 2 года назад

now I understand the difference between aligning and justify

@MrRjprince18 3 года назад

Thankyou so much Harry brother for this kind of content. Even i bought a course from popular website i can't share the name but good name in coding but as compair to your content in youtube their content was zero 0.

@DipsOfficial802 2 года назад

One of the best course to learn web development from Noob to Pro level... Thank you so much bhaiya 🙏🙏

@sa25078 3 года назад

Video and ita content is ausm . Really cool teacher and such teaching method is needed in schools/colleges for better result😅

@cosmos5471 4 года назад

And thanks alot for all the free videos you're making for us...i definitely wanna meet u once in my life time.god bless you

@umair.dev996 3 года назад

Nice demonstration.. you are true concept lover and provide the correct knowledge... i am very inspired.. i have to say .. BIG FAN SIR...

@NikhilPawar151 10 месяцев назад

Awesome tutorial. Initially I don't like CSS at all. But after watching your playlist I like CSS part. Thank you harry bhai for such great content in most easy to understand explanation. Thanks a lot.

@takla_takli_talks7934 2 года назад

Thankyou so much dear sir for making this wonderful tutorial about flexbox This is mostly recommended to all of you guys who search for the flex box tutorial in css

@shadyy488 2 года назад

Addicted to the beat which plays at the end of every video of harry

@swagatbaruah522 4 года назад

Bro when will u continue Android and ML course. Plz start whenever u get time. Ur the best. 🙏💕

@mokshshah6427 Год назад

Love you Harry bro, you explained us these topics in simplest ways. Thank you very much...😊

@pranavsharma7479 2 года назад

justify content always positions the boxes on main axis and align items is used for cross axis, not always horizontal and vertical it depends on the relative position of main axis

@aditisharma9412 3 года назад

Thank you Harry Sir....Your tutorials and way of explanation is amazing....Please make tutorials on Jquery and Bootstrap as well....Thank you once again ..

@whatsnewnow4469 3 года назад

one of the super human being on RU-vid ,He knows everything.lots of love from my side.Awsm bro. I wish your logo should be there in font awsome(google)

@sakhawathussain9696 Год назад

You bring us the techniques of the method in an excellent way and you are understanding us the scenario in a summaries path to gain the web development techniques. Thanks so much

@fahimhassan4387 4 года назад

sir boostrap tutorial need in this series

@kunal12761 3 года назад

Yes sir we need a course on bootstrap

@vedangkavathiya8652 3 года назад

Yes.. bootstrap tutorial please..

@shikharagarwal6034 3 года назад

Well described, i must say this course is much better than the paid course i ever had. Thankyou so much harry for such a nice video!!! Stay safe. jai hind

@niteshprajapat7918 3 года назад

exactly brother

@anishamalblanco7386 3 года назад

Thank you for this awesome playlist, Harry Bhai... You are a legend. Love and Support from Nepal.

@shahbazkhalid6950 2 года назад

Great Harry bhai. You are not just teaching you are also creating cheetsheets

@satwinderkaur2228 3 года назад

Thanks for sharing this informative tutorial. You explained it very well!!

@kangkanhuzuri6525 4 года назад

I will recommend your channel to everyone I know who wants to learn programming! you're doing a great job!

@VijayPatel-ez4lp 2 года назад

thanku harry bhai. Yahi vah jagah hai jaha aapko saare item mil jayenge .😀🥰🥰🥰 webdevlopment video.

@preadsy6912 2 года назад

thank you harry bhai for your courses for free I can't afford money on whitehat But I learnt html,css, Java, javascript, Php, C++, C with the help of harry bhai next target python! and mobile and app development

@dhroovchhipa6399 3 года назад

This is huge 😍😍😍 Thanku so much for this video !!

@abhilashapanda7406 2 года назад

At 23:42 when u copy pasted the justify-content note to align-element at line 35, you should have changed the note to-> align elements will align the content in vertical direction, instead of writing the note as- justify-content will justify the content in vertical direction. Hope it helps.

@saamirrangrej4251 2 года назад

Ty brother

@DigitalAndTradingSolutions Год назад

thanks a lot sir for flex box,what a lovely explanation,things got crystal cleared.....Thankyou so much for sharing valuable content free of cost and putting this much efforts shows your kind nature.

@rachanaa6745 3 года назад

so effective teaching Sir... thanks so much for making this topic so easy to understand.

@rehmatullah8055 2 года назад

Here some twist in flex-wrap:wrap; property when you give width of your container 100% the elements wrap and come to new line as you decrease width in Toggle Device Toolbar using Chrome Dev. If we set width of our container in some pixels like width : 900px ; then the elements inside container are wrapped fixed so it no more coming to new line when you decrease width in Toggle Device Toolbar...

@DesiShehri 7 месяцев назад

i'm facing this problem and now find solution ... thanks .

@ruchakulkarni7119 3 года назад

This video was indeed interesting!

@30vaibhavdhaygondexdr.v.sa22 3 года назад

Thank you very much for simplifying the concept!

@abhisheknl509 10 месяцев назад

So great to have a teacher like you. Thank you for your effort.

@johnpandian7635 3 года назад

actually, the align-item: stretch; is used to stretch the element in cross axis, It is not used for vertical alignment just wanted to point that.. the course is DOPE harry bro

@mahendrakumarkhichi7879 Год назад

Cross axis vertical axis hi hota h

@tamharjeetsinghwalia181 Год назад

@@mahendrakumarkhichi7879 chhod bhai kuch logo ka kaam hi nooks nikalna hota ha. Zaada samajhdaar ban ne ki koshish kar raha tha voh

@biswamohandwari6460 3 года назад

Your explanation is amazing. Believe that!!!

@rspatwari3046 3 года назад

Sir you are awwesome trainer . Country needs more trainers like you.

@centauricoder 2 года назад

bhai you are Wikipedia, really you have abundance of knowledge, thank a lot.............

@YourWellWIsher1982 3 года назад

I knew some CSS but this is the first time I came to know about flex. Thank you Harry bhai

@ashiskanu7101 3 года назад

Flex is better than floating and positioning

@YourWellWIsher1982 3 года назад

@@ashiskanu7101 True and I am enjoying it

@Anonymous-mb5ge 3 года назад

note : you can use flex-start and flex-end in justify-content also

@iamjxtinn 11 месяцев назад

yes

@ishtiaqahmad4118 4 года назад

The Great man, I have learned a lot of things from this video. very very thinks. I.A.Siddiqui

@glorysingh 2 года назад

your explanation is so smooth and satisfying...Best teacher Harry sir 🙌🥳

@chand1virk 3 года назад

Harry Ergonomic key boards avoid, wrist stress and efficient long working hours. thanking you for sharing, great knowledge.

@jasminshrestha6573 2 года назад

Sir, when i m assigning flex-direction value to column and flex-wrap value to wrap, it doesnot work out. May you help me out?

@apudash6158 4 года назад

i like your teaching style. beginner like me easily understand. Awesome.

@kirtiiyer490 3 года назад

I am learning web development, your tutorials are just legendary 🔥🔥🔥🔥

@damnitstrendy1979 2 года назад

AT this time period 12:41 you can see how much hardwork, he has done for us

@hiranmali371 Год назад

Mate he is making MONEY...

@amitnarayan707 3 года назад

Thank you, sir for explaining about display = flex I am getting difficulty in the display = flex

@usableknowledge7205 3 года назад

display: flex;

@prajyot2021 2 года назад

Harry bhai salute to your efforts, dedication n मेहनत for us. LUV U BRO

@divyanshrathi2854 2 года назад

Best tutorial I found in youtube... Awesome man... Keep it up.

@kirtisharma165 3 года назад

hello Sir, thanks for the tutorial. In the align-items: stretch; we need to remove the height of the item because it is fixed when we remove that then this stretch property will work. Thanks.

@chanchalsolanki2349 2 года назад

Sir, I am creating a navigation bar and take two div for left box and right box in it. when I am trying to shift left box in left and right box in right using position property and sets respectively- top 5px and left: 10px,top: 5px and right: 10px ,both boxes overflow the navbar and navbar shrinks in a single line. should I set the height of navbar or if you have any other better alternate please tell me.

@sasmitkolhe1082 2 года назад

You can put two boxes in div with class navbar and set properties of navbar accordingly(Didn't understood your doubt clearly but I think this will help)

@sameerhussain2579 2 года назад

Check out Video #26, Project 1

@madhurgupta6238 2 года назад

Best video on flexbox.thankyou so much harry bhaiya for giving us wonderful content for free

@Its-Boremon 2 года назад

thank you ,harry bhai...kam karte karte socha nahi tha k kabhi stack se reated kuch sikh paunga ...god bless you bro

@mayankmishra3088 4 года назад

Hey can you help me out with "flex-wrap: wrap", it doesn't work on my system. When I reduce the screen size the boxes don't wrap, they just disappear according to the screen size

@Rynkbell 4 года назад

try decreasing the width and height of boxes

@yogeshchauhan5331 4 года назад

bhi mere sath bhi yahi ho ra hai

@yogeshchauhan5331 4 года назад

koi solution mila kya

@bhaskarjyotideka6905 3 года назад

You can try adding this piece of code inside head tag:

@alishagupta8611 3 года назад

flex-wrap:wrap; basically wraps the flex items inside the flex container. That's why if you are trying it with "flex-direction:column;" it may not be giving the desired result. If you want to get the desired result put flex-wrap:wrap as comment when you are using "flex-direction:column"

@aishwaryasahay8372 Год назад

is it necessary to set width in % rather than in px to use flex wrap property?

@Avyay10 Год назад

i dont think so

@AbdulJabbar-vu9ou Год назад

hmmm i agree but not too much

@amudalagopikrishna5745 Год назад

no i guess

@rainynaturevibes Год назад

percentage or px is just a property of width for the element you can use both of these for the flex-wrap property.

@iamaniketkr 3 года назад

Superb explanation in JS, Thankyou Harry 😊♥️

@sayedhussain 3 года назад

Thank you sir, this is the best flexbox tutorial on RU-vid.

@generationwolves 3 года назад

Your explanation that justify-content works in the horizontal direction, and align-items works in the vertical direction is incorrect. They depend on the flex-direction. A better way to understand the behavior of these two properties is by knowing about the two axis in Flexbox: Main axis and Cross axis. The Main Axis runs along the direction (flex-direction) of the flex layout. It is horizontal when flex-direction: row; (default) It is vertical when flex-direction: column; The Cross Axis runs perpendicular to the Main axis (that is, it is vertical when main axis is horizontal, and vice versa). The Flexbox properties justify-content and align-items target each of the axes. justify-content always affects the main axis align-items always affects the cross axis Please take a moment to study the diagram at 1:27, and fully grasp this tiny little detail. Everything else in Flexbox will become so much clearer after that.

@santoshachandrasekhar8342 3 года назад

You are great, your tutorial is awesome, if those website developer had missed this tutorial definitely he/she missed something. I definitely touch your feet, if I get a chance to meet with you it's my pleasure!