From the course: Making Sense of the CSS Box Model
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Flex: Content-based layouts - CSS Tutorial
From the course: Making Sense of the CSS Box Model
Flex: Content-based layouts
- [Instructor] Flex, also known as flex box is a content first or content out layout module in CSS, which is applied to a parent container, called the flex container, and affects both this flex container and its immediate children called flex items. It works like this, in my browser, I have an unordered list with some list items, this is a standard navigation menu, you can see it over here, now I want to turn the unordered list into a flex container, I do that by targeting the container in CSS in this setting display flex. This creates a new flex container around the child items, which are now flex items, and each of these flex items are given an equal share of the available space based on their intrinsic size. You'll notice that some of these items have more content in them, so they're taking up more space, and some of the items are taller than other items, so in this case we have this standards and such item…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.