PB101: L10 - Content Justification & Alignment with Flexbox
ฝัง
- เผยแพร่เมื่อ 10 ก.ย. 2024
- In the previous lesson, you learned about the power of CSS Grid for structural layout. Now we have to talk about Flexbox, which is a critical tool for the justification and alignment of content within containers.
In this lesson:
✔️ Display Flex
✔️ Custom HTML Elements
✔️ Flex-Direction: Row vs Column
✔️ Justify-Content: Main-Axis Justification
✔️ Align-Items: Cross-Axis Alignment
✔️ Align-Content: Multi-Line Cross-Axis Alignment
✔️ Flex Wrap
✔️ Row-Reverse, Column-Reverse, Wrap-Reverse
✔️ Flex Children Controls (Grow, Shrink, Basis, Order)
✔️ More Basic CSS
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner...
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
I think I need to start downloading those movies just in case the internet goes down. These lessons are too valuable :)
👌🏻
I had the same thought too.
jdownloader 2 .. dont mention it ;)
I think this video might get you the Nobel prize for CSS. Flexbox has seemed absolutely random to me, but this is immensely helpful. I'll still be confused, but now I know to look at this video for help. I guess I should even make myself a cheat sheet. Thanks, a lot, Kevin!
These lessons keep getting better and better!! You are making the world a better place. Thank you!
You are a great teacher! It is not easy to speak with so much enthusiasm when there is no one is sitting in front of you. I also appreciate that you explain things step by step instead of copy pasting code.
Thank you! 😃
Thank You. This is, by far, the best explanation I have ever heard on Flexbox.
I wish all this great content was around when I started. :)
I get that flexbox has its uses, but I'm also really glad that the page builder takes care of the complexity behind the scenes for me. Understanding that flex box is for alignment and for allowing children to do their own thing really makes the separation between grid and flex really clear, thank you.
I want Kevin to design the web standards 😂 This was the most valuable lesson for me thus far! P.S: Your caveman voice was epic!
You're doing such a great job with these trainings....I thought I knew quite a bit but there's hasn't been a single lesson I haven't picked something up which has helped to understand in greater detail what things do and are meant for. Kevin, you're the best and as mentioned before....you have changed my business life so much. Appreciated a lot and am truly grateful. Scott Co
🙏🙏🙏
I was just thinking: there are so many guys hosting TH-cam’s but most of them blow smoke about some piece of software like it’s the best invention since sliced bread yet only to find them blowing smoke at the same type of software from a competing developer, a few months later. In fact most of them are teaching how to use the software according to their way of usage. Hardly any word about best practices and what not.
However your way of teaching is not based on the tool at hand but about understanding what you’re doing and what css is all about. So what ever page builder you’ll use in the future you can always rely on the knowledge you’re sharing. This way is much better for the long term 💪
One simple example is some of these TH-camrs now started to use clamp like they invented it but I believe it was you that started to explain why clamp is a much better way
@@innotrends8416 I wish there was a way of pinning your comment becaue it somes up my feelings too.
this was much fun, love the fact it step by step just how i like it, just how it should be done, took me a few mins work out how you added 3 different colors, :)
It's hilarious how "not confusing" I thought Flexbox was until I watched this video. Bricks *really* tricks you into thinking Flexbox is easier than grid. Sheesh.
So glad you used codepen for this lesson. Now I understand what is happening in builders like Bricks much better when using flexbox. Excellent! Thanks!
This is the best CSS crash course. Hands down!
After watching this video on flexbox, rewatched previous video on grid to review the small section about flexbox (at 44:10) . Made much more sense.
Sooo informative! It's one thing to use a page builder and another to actually understand why and how they work. Thank You Kevin for "detailing" things so well.
Kevin, you really rock my world. When flex boxes first appeared, that's when I found out about them. For the past five or six years, this has been my go-to. However, I must admit that I did not initially possess such an in-depth understanding of alignment principles. I've learned so much from so many CSS experts, but no one has ever explained the fundamentals quite like this 40 minutes video. Your method of instruction is fascinating and wonderful. In my opinion, this is the crown jewel of tutorials. Aside from loving, subscribing, and commenting, the most I can do in return is to try to teach things in my home tongue of Tamil and, of course, give you credit for doing so. Hold steady in your excellent work. ❤😍👍
Thanks, I appreciate you!
30:03 same fun that I've been having myself as a parent 🤪
incredible teacher
🙏
In the past I have researched flexbox many times, nothing explained it as well as your video.
You say in previous videos I'm going to hit you with a fire hose in the face. This hit me with Niagara Falls. Yet still informative. No one else teaches CSS using real-world examples as you do. I love the Content Justification & Alignment with the Flexbox lesson. Flexbox vs Grid is great. You are using Bricks, but I like the fact you can apply this to over page builders like Builderius, and Oxygen, etc.
Once again, thank you for a great video. Coming from a GeneratePress/GenerateBlocks background, Flexbox was, quite honestly, a mystery to me but about halfway through this video the penny finally dropped and I now at least understand the basics. I am also, concurrent with your course, doing a CSS course and I feel I have learned more about CSS from you here than I have in the first ten modules of that CSS course.
💪🏻💪🏻💪🏻 keep up the good work!
OMG 🤯 now I understand what were those bottoms in bricks hehehe
thanks for this content 😁
This was really helpful. I agree with Kevin that following along in Code Pen is really helpful in learning CSS Flexbox.
Who the hell designed these things so confusingly...you tried best possible way to explain these things. Thank you
I want names and addresses!
There may be thousands of flex-box tutorials in this Universe oh no.. could be millions ( if you include all Indians and Chinese tutorials) but this one is only, this one I'm telling you again, Mr. Geary this the "NUMBER ONE" anybody against my opinion, should have 'prison time'
Wow, what a great video on flexbox. It has always seemed somewhat mysterious and random.
I have always found flexboxes extremely confusing. You explain why, very well!!! Often times, I have been just clicking various alignment controls in page builder to see which one gives the desired results (very bad trial and error approach). Your explanation gives some method to that flexbox alignment madness. I need to watch this video a few more times and play with codepen a lot to grasp it better. Thanks for doing this tutorial. I really needed it for my own sanity.
Thank you Kevin - had the basics w/flexbox but it has helped so much to write the code to figure it out as opposed to using in the page builders.
👏🏻👏🏻👏🏻
Super clear tutorial Kevin 😄
Now I am thinking how I sleep on my bed.
Flex-start at 10pm,
Flext-end at 12am
then
flex-under bed at 4am....
That was fun!!! Thanks
Thank you Kevin ! At my start, I played a lot with Flexbox Froggy to (try to) understand all those concepts 😄
6 stars out of 5 for this video. I so of often was confused about what was happening with my content using flexbox in the pagebuilder...
I wish you were the one developing this. Probably it would have turned out much less confusing 🙂
Glad it was helpful!
Great tutorial! Thanks a lot for doing these👍
31:41 The space between flex-child and .target:
The space is a descendant combinator in CSS.
It selects nodes that are descendants of a specified node.
In this case, it means any element with the class target that is a descendant of an element with the class flex-child.
That's what I explained in the video, right?
100% and you did a great job as well! I just wanted to expand on some of the nuance here because if you're not playing close attention, I think it could be easily overlooked. Had to rewind the video a few times to let it sink in. What looks like could just be a typo (a singe space!) is actually a whole concept in CSS, this idea of a "descendent Combinator". @@Gearyco
Yeah, for sure. A lot of people miss that in the early stages. Seems like something that might not matter at first glance, but it's huge.@@chillydoog
You are a Good Teacher ;) Thank you.
Welcome!
Great Job. solved one of my errors as well. and your right, say had to do a better job with naming things. very confusing from time to time.
Thanks!
🙏
Sorry, I am late for this lesson 😢. Flexbox is more confusing than Grid, I agree 😀 (items & content) !
Good lesson
Thanks 🤩
Hi Kevin! I'm rewatching the entire series while building a new website with Bricks. Thank you again! I've been trying to find the video where you show how to visually change headings order (position) on the mobile version to prevent two blocks of text from stacking together. Could you help me identify the video, please?
I’ve done it a few times, most recently here: th-cam.com/video/KaLo2YT40UY/w-d-xo.htmlsi=rfFkVOXuypby_0dx
He said he wants his box unmolested lmao im dying
Doesn’t everyone?
If we install live preview extension, visual studio code will work just like codepen. I mean live preview not live server.
Yes
l love the Codepen playground. After playing with the examples, I realized that I should be able to figure out how to make a read-more button aligned at the bottom of each child element card. I thought you had shown this solution in one of your PB101 videos but haven't found it. Can you give me a clue as to how to make read-more buttons align at the bottom of a number of children flexbox cards that each contain a heading, paragraph, and button?
margin-block-start: auto; --- formerly known as margin-top: auto;
@@Gearyco thanks. Will check this out. You are so helpful (and fast) 😀
I gotta go get a snack mufkuh 😂
I'll say flexbox is super confusing if we don't use Page Builder 😁.
Page builders make it more confusing IMO. just depends on how you learned it originally I guess.
@@Gearyco yeah, that's a valid point. I think why every page builder have to add different names for same setting 😅.
😢
so align-content should have been called align-wrapped-content 🤔🤔🤔
Perhaps!
pokin boxes, forcing children, playgrounds... you better watch out for the AI woke police buddy.😯👮😉