Display Properties in Oxygen EXPLAINED (Block, Inline-Block, Flex, Inline-Flex, Inline, Grid, etc.)
Vložit
- čas přidán 10. 07. 2024
- I've gotten a lot of emails and have seen a lot of questions in the Oxygen community about display properties (flex, inline-flex, block, inline, inline-block, grid, etc).
Half the questions are from beginners who don't have a lot of experience with these display properties and half are from experienced people who are confused as to why these properties don't work in Oxygen the way they work "in the real world."
It's true ... Oxygen does some things by default which break a few of the traditional display properties. If you don't know this is happening, it can be super confusing and frustrating.
By the end of this tutorial you'll know exactly what these display properties do and how they're supposed to behave vs how they actually behave in Oxygen. In short, you'll be able to use every single display property with confidence.
Want more detailed trainings? Join the Inner Circle: digitalambition.co/inner-circle/
Want my responsive CSS framework? automaticcss.com
01:25 Display Block (Default vs Oxygen)
09:45 Display Inline (Default vs Oxygen)
15:40 Display Inline-Block
16:59 Display None vs Visibility Hidden
18:57 Display Flex
32:11 Display Inline-Flex
36:00 Display Grid
Your excitement finding the inline-flex bug 😂 Another great tutorial and good to know the quirks of Oxygen.
It was punking me.
Even though I don’t use Oxygen, this was a superb and foundational training. Very much enjoyed it! Thank you. 🙌
I completely agree that the flex terminology is confusing. Thanks for another great training video. Looking forward to more training in the Inner Circle.
This is why there needs to be a fork of Oxygen (or maybe just a toggle switch?) to switch from "Assisted CSS" (Oxygen Default) with "Pro CSS Reset" (no overrides and straight up HTML, CSS, JS). Maybe that project should be your next Oxygen Improvement ;) Just a note, but this is why Bricks looks so promising.
I didn't know Matt Damon was so good at CSS :P another great video.
From the very beginning of my Oxygen journey, I used OxyNinja and now ACSS. I never took the time to fully figure out the display properties as a result. The Oxygen quirks made me frustrated whenever I’d try to use display properties so I’d just go back to utilizing the utility framework.
No doubt my spacing all the sudden went wack. I have to watch an ACSS video in particular around fonts.
What was your biggest "ah ha" moment when it comes to understanding display properties? Drop a comment!
Understanding Flex x vs y layout controls. I never understood it before.
Very well explained. Exciting and useful. Thanks, Kevin!
So useful (as usual !), thank you Kevin !
great video, very informative, thank you
i have taken the default values of FLEX from section.class.php and div-block.class.php. it seems to work now without flex in the html code
Love this details explaining 😅
🤣 Dawg! Do you get a bug bounty reward from Elijah? I was almost expecting you to jump outa your chair and do a "Sic 'em" dance.
I’ve just never found one that big before 😂 I typically don’t use the alphas and betas so I don’t find a lot of major bugs
I seriously never had to do anything else to style elements by just using the basic oxygen flexbox + margin auto
But Finally a normal understanding of that whole panel lol. Never knew what it did.
(Shouldn't oxygen separate block vs flex options so you know what to select (parent/child)
It's correct to have them all grouped together. I think they use flex column by default to help beginners out. It does provide a shortcut for a lot of things, but it also makes certain things a little more confusing.
@@Gearyco I don't mean completely separated but semi-separated so it becomes clear for the user
Parent - child
---------------------------------------------------------------
| Flex inline-flex || block inline-block |
| Grid || none |
---------------------------------------------------------------
Hi, this is such a great tutorial, thank you so much! But I am wondering, is this bug still there? I am on 4.2 and it behaves exactly the same like in the video :o)
Not sure I don’t use oxy anymore
Hi
Could you do a video on displaying an image on different on a div at different point/location.
Can you provide more detail on what you're trying to accomplish?
@@Gearyco I mean, positioning of an image inside a div wherever you want.
@@gibygeorge4789 I'm going to do a tutorial on all the different types of positioning.
This is so hard to watch before bed after scripting for 13 hours lol. So basically beta is buggy and contradicts the fundamentals. Am I shocked… I am not
It’s not just the beta that contradicts. It’s every version of oxygen. The beta just has an inline-flex bug.