Join James Williamson for an in-depth discussion in this video Understanding the flex property, part of CSS: Flexbox First Look.
- View Offline
One of the main properties you can control through flexbox is the flexibility of flex items. I mean, flex is actually part of the name, so you know it's pretty central to how flexbox works. In this chapter we're going to discuss how to control element flexibility. Because the flex property can be a bit hard to understand at first, I want to go over the property syntax and its options before we jump into using it. The flex property is actually short hand for three individual flex box properties, flex grow, flex shrink and flex basis.
Together, these three properties tell user agents how big an element is, how it should be sized relative to other flex items and how the element should react when the size of its container changes. First, let's take a look at flex grow. Flex grow is expressed using a number and it's used to determine how much a flex item will grow relative to the rest of the flex items inside the container. If every flex item has a flex grow of one for example, each item would be the same size. If flex grow is not defined for an item, it defaults to one.
Flex shrink is also expressed using a number, and it determines how much a flex item will shrink relative to other flex items inside the container. As with flex grow, it defaults to one if you leave it off. Flex basis is a little bit more complicated. You can set flex basis using the same values you would use for an element's width. So, values in pixels, percentages, or any length as well as the key word auto. This value is then used as the initial, main size, of an element.
Before any remaining free space has been distributed. If you leave it off, the initial value is assumed to be zero. In most cases, you won't be setting all three values. Usually, I see either a single flex grow value or a combination of flex grow and flex basis. If you want a list of common values and how they affect an item's flexibility, check out the section on the flex property in the W3C flexbox specification. Like most things, it's actually a little easier to understand once you see it in action, so we're going to work with the flex property in our next exercise.
- Reviewing Flexbox support
- Defining elements
- Controlling element flow
- Wrapping content
- Defining display ratios
- Aligning single and multiple items
- Nesting flex containers