You’ve haven’t understood CSS Flexbox until now. Feeling frustrated? You can’t find great answers to your questions… let me make it easy for you in just 10 minutes.
We use the VS Code editor to demonstrate many of the flexbox properties, and we also use the Microsoft Edge extension development tool to analyse how flex basis and flex grow work together.
Flex direction is reasonably easy to understand, but the concept of horizontal vs vertical writing directions can certainly be the cause of some confusion… why don’t you ask me?
Align items vs Align content has no doubt confused many of us due to their seemingly ambiguous similarities, but it’s only when flex wrap (multi-line) is in action that the latter comes into play.
We finish off with a CSS trick, whereby nested flexible division elements wrap onto a new line independently of each other. The divisions use their own width attributes to control when wrapping occurs, which we confirm by inspecting the browser’s computed values.
00:00 - CSS Flexbox getting started
01:51 - Flex basis & Flex grow relationship
05:18 - Flex direction (horizontal vs vertical)
06:09 - Align items vs Align content (confusing)
09:14 - Nested flex divisions (CSS Trick)
Негізгі бет How Flexbox can Drastically & Quickly IMPROVE your web development
Пікірлер: 2