Tailwind CSS Tutorial #7 - Using Flexbox
ฝัง
- เผยแพร่เมื่อ 9 ก.ค. 2020
- Hey gang, in this tailwind css tutorial we'll look at how to work with flexbox & use it to flesh out a little of our design.
CSS Flexbox tutorial - • CSS Flexbox Tutorial #...
🐱👤🐱👤 JOIN THE GANG -
/ @netninja
----------------------------------------
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/vu...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱💻 🐱💻 Course Files:
+ github.com/iamshaunjp/tailwin...
+ Full html template - github.com/iamshaunjp/tailwin...
🐱💻 🐱💻 Other Related Free Courses:
+ • HTML & CSS Crash Cours...
Download node.js - nodejs.org/en/
Get VS Code - code.visualstudio.com/
![[LIVE] : ONE ลุมพินี 73 วันนี้!! คู่เอก "วรพล vs พันฤทธิ์"](http://i.ytimg.com/vi/rrOljlqse3A/mqdefault.jpg)
![บุษบา - วงชานเมือง [LiveCoverVertion] Original : เมนทอล](http://i.ytimg.com/vi/Dm81sKcd9rs/mqdefault.jpg)
This was instructive, I do understand everything, Thank you and Keep up the great work.
The best teacher to learn from!!
tailwind is really a bliss
Best series of all!!!
ALWAYS learn a lot from you
Thank you!!! 😁
I'm unsure if you can help, but I'm fiddling with tailwind at the moment and I want two divs sitting next to each other when the screen width is at a medium size. Anything smaller, I want them sitting on top of each other. I've tried using md:flex and flex wrap, but to no avail. Is there a solution to this?
amazing!
you are awesome mentor
Hey Master! When can we expect the Tutorial Express + React? :D
Colored divs at 3:50
good man
There is a person on the earth who has turned on notifications for the Net Ninja channel just so that he can dislike Shaun's videos whenever he publishes them.
and that man doesn't even matter to ninjas fam! xDDD
Some people just want to watch the world burn...
the dislike ninja
@@golainte 😂
thanks bro !
thank you so much sir
I literally understand flex property 🥳🥳🥳🥳. Thanks sir, you explain very well.
Great to hear! :) thanks for watching
Hey Ninja, I absolutely love your videos. Recently I was studying express and node. I kinda feel that we have to memorize a lot of things. Do we in general have to memorize/ see documentation for these things? I know javascript but still feel that there are many things that i don't know. Can it be because of my bad js skills or is it just how express/node works. Also thanks for making videos and helping me in my dev journey
You don't have to memo anything, simply refer to documentation. Even for very basic things, it's absolutely fine.
Hey, first of all thanks - really glad you like them. Secondly, for sure you do NOT need to memorize everything. The core syntax of any language / framework / tool you use will sink in over time the more you use it, but the main thing is that you understand how something works & why. As long as you understand something, you can always look-up a method, property or best way of coding something :).
The Net Ninja Thanks a lot
There it is! 1:19 TADA! 😝😝
Hey shaun, can you please tell how many videos are going to be in this series? And when do you expect to complete it? Much appreciated.
Hey, about 18 in total probably about another week or something until it's all up.
@@NetNinja that's amazing, thank you Shaun ❤
@@NetNinja thank youuu!!
1:45 flex justify-center
2:00 flex justify-start
2:05 flex justify-end
2:20 flex justify-between
2:30 flex justify-around
2:40 flex justify-evenly
2:50 flex justify-end
3:55 h- w-
4:50 boxes - flex
5:10 boxes - flex item-end
5:30 boxes - flex item-center
5:40 boxes - flex item-center justify-center
How can I guess what the margin, padding, height, width strengths stands in pixels?
the values are in rem units, as per the documentation (tailwindcss.com/docs/padding)
rem is based on the font size of the root element - 1rem = 1 * root font size
on most modern browsers the default font size is 16px, if not changed by the user (i.e. made the text larger/smaller), but you can also set it in your css
the font-size of the root element (typically ) is just set the way you set font-size anyway:
html{
font-size:12px; /*change to 12px*/
}
now 1 rem is 12px, and you can do analogously all other calculations
keep in mind that while you set it with font-size, you can use rem units for anything you may use pixels for - margin, padding, drop shadows, font-size, borders, etc
there are also plenty videos on the topic of rem, and his little brother - em, so I suggest watching some, it was hard for me to understand them at first too ;)
hope this helps, 4 months later
anyone knows the color theme he uses?
I create my own classes and import them in the tailwind confg file, then I go to the html and put them, but they are shown in the html files, but the code does not work.
Did you find out why? I have the same problem!
Awesome +++++++++++++++++ 😃
What VSCode theme do you use?
Hey, it's Monokai++ :)
The Net Ninja Thanks!
@@apricity3131 try synthwave '84 theme with glow enabled
my highschool it class is using your videos lol
Aha :) that's awesome
How do you get your terminal to be all stylized like that with the emojis lol
tailwindcss build src/input.css -o public/output.css only builds out @tailwind base; it dose'nt build @tailwind components and @tailwind utilities
Same thing happened to me but now it's working fine reply me I'll tell you how I did it or you can just search on TH-cam tailwind installation and filter the results as this month and watch the first video that comes up at top
💙💙💙💙💙💙💙💙💙💙💙💙💙💙💙💙
This didn't work on my system. Not sure why. The flex properties didn't reflect on my browser.
Check the href attribute in the link tag. Make sure the name is correct.
Please make a playlist on anime js or howler js or ml5/tensorflow js
like if you agree so sensei can see it