HomeОбразованиеRelated VideosMore From: Codegrid

Responsive Image Gallery Using Flexbox | HTML & CSS

607 ratings | 30335 views
The CSS3 Flexible Box, Or Flexbox, Is A Layout Mode Intended To Accommodate Different Screen Sizes and Different Display Devices. The Display orOder of Flexbox Elements is Independent of Their Order In The Source Code. Popular Layouts can thus Be Achieved More Simply and with Cleaner Code. This Tutorial Shows How You Can Create Simple Responsive Image Gallery Using Flexbox. Thank You For Watching ! Music : [Chillstep] Liquid Memoirs - Lucid : https://www.youtube.com/watch?v=3CgUb2IfbcQ Credits : Heroboard Twitter: https://twitter.com/heroboard Spotify: http://sptfy.com/Wdk
Html code for embedding videos on your blog
Text Comments (20)
Было бы хорошо если бы оставляли ссылку на проект.
Jonathan Barclay (1 month ago)
did this one and the images went up and down not left to right
Ruben Verster (1 month ago)
maybe try "column wrap"
Автору респект и почтение и музыка прекрасная :-)
Bryan Mancía (3 months ago)
Awesome<3
Ma Ma (7 months ago)
............thanks
likanov (7 months ago)
hey dude, ty for ur work! Do you have github?
Ende Pointe (7 months ago)
Therapy
Juan Esteban Barrera (8 months ago)
Hi! Can you quickly explain to me what is that -ms-flexbox that you're using? Thanks a lot in advance
Ruben Verster (1 month ago)
It's for cross-browser compatibility
Anderson Lee (2 months ago)
i think that's the same as display: flex but for safari
Ende Pointe (7 months ago)
Juan Esteban Barrera mdn
shahed Mahmud (9 months ago)
thanks...........
Javier A. Reyes Acevedo (9 months ago)
thanks bro for the tut, but i have one question, if my images have a diffent height in my case they display with different heights if any way to fix that?, and the second if is possible you can make a tut teaching some hover effect in images for example when i place the cursor on the some image this react width a zoom effect but without lossing the rectangle of the image i dont know if i explain properly, thanks again PS: sorry if my english isn't perfect :(
Meraj Ahmad (3 months ago)
Use bootstrap and add class img-responsive it will work...😊
Codegrid (9 months ago)
+Javier Reyes I think the simplest way is to crop images in same dimensions with photoshop and then use it! 🙈
Pawan Saini Singodiya (9 months ago)
plz make a separate series on flexbox...
Arsalan Shaikh (11 months ago)
Ah beautiful helped a lot thanx...
redsharingman (11 months ago)
I've been using flexbox for sometime now but didn't know about that trick!
Codegrid (11 months ago)
Oh ! I hope this tutorial helped you to get idea about this !

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.