Gain insights into advanced and modern CSS concepts with a humorous twist. Explore direction-agnostic layouts, columns, flexbox, and grid, with engaging challenges at each stage.

Modern CSS Layout Decking Zombies with Style.png

In this course, you will learn advanced and modern CSS using zombies, silliness, and a sense of humor. If you’re looking for a course that’s accessible to those without technical training or inclination and/or don’t mind laughing a bit while learning, this course is for you.

You will start by learning some basic concepts of inline and block direction along with how they are used to style direction-agnostic layouts. Then, you will move towards learning CSS columns, followed by flexbox and finally grid. You will face a challenge at the end of each chapter that will test your learning.

Modern CSS Layout: Decking Zombies with Style

# Growing and shrinking zombies
`flex-grow`: This lets you set a growth factor that allows items to grow to fill the
space (either horizontally or vertically, depending on `flex-direction`). The
growth factor is a positive, rational number and is not a direct multiplier for
the width/height. Rather, when the flex algorithm looks at the remaining space
available in a row or column, it calculates how to apportion space based on the
flex-grow factors. A higher value means that that item is likely to get more
space than those with a lower value. The default is 0, which means the item won’t
grow at all. Negative numbers are invalid.
```CSS
.zombie-item {
    flex-grow: 1.5;
}
```
`flex-shrink`: This lets you set a shrink factor for when flex items are too wide or
tall for their containers (depending on the `flex-direction` that was set). Like the `flex-grow` factor, a higher value means that the item is more likely to shrink.
The flex algorithm will see if it needs to slim some items to fit the available
space and will take more space from elements with a higher `flex-shrink`. The default is 0, which means no space will be taken from the item. Negative numbers are invalid.
```CSS
.zombie-item {
    flex-shrink: 3.5;
}
```
`flex-basis`: This sets the basic size value (width or height, depending on `flex-direction`) of a flexed item and helps determine when, how, and if a flexed item grows or shrinks. This can be set with any dimensional unit (i.e., pixels, ems, percentage. etc.), but `flex-basis` also has the following keyword options: `content` and `auto`.
There are a few more, but they aren’t widely supported yet. It defaults to `auto`.

`content` allows the flex-basis to be determined by the item's content. Due
to a back and forth in the spec, the content keyword isn’t supported everywhere yet. However, we can produce the same results with `flex-basis: auto` plus a width or height (depending on `flex-direction`).
```CSS
.zombie-item {
    flex-basis: 100px;
}

.zombie-item2 {
    flex-basis: content;
    flex-basis: auto 100px;
}
```
`flex`: This is a shorthand property for the `flex-grow`, `flex-shrink`, and `flex-basis`
properties. It can be used with one, two, or three values.
- One value: One value means a unitless number will be assumed to be `flex-grow`, and a valid width value will be assumed to be `flex-basis`. If `flex-shrink` isn’t specified, it is assumed to be 1.
```CSS
.zombie-item {
    flex: 2;
}
```
- Two values: Two values can be two unitless numbers. The first is `flex-grow`, and the second is `flex-shrink`. It could also be a unitless number and a width/height for a `flex-grow` and `flex-basis`.
```CSS
.zombie-item {
    flex: 2 100px;
}
```
- Three values: Three values mean the first is `flex-grow`, the second is `flex-shrink`, and the last is `flex-basis`.
```CSS
.zombie-item {
    flex: 1.5 2 100px;
}
```
You can also use some keywords: `initial`, `auto`, and `none`. 
- The `initial` is equivalent to `flex: 0 1 auto`. 
- `auto` is equivalent to `flex: 1 1 auto`.
- `none` equates to `flex: 0 0 auto`.

> __Note:__ The nth-child selectors are there to throw in a little bit of chaos, allowing some items to shrink, some to grow and some to have a different basis. If we applied grow/shrink to all items they would all have equivalent grow/shrink ratios and nothing would be different.

__Experiments to try:__

1. Add different grow, shrink, and basis to different items using ids `zomb1` through `zomb20`. Watch how the layout changes.
2. Now take any one of your grow/shrink/basis combinations and rewrite it using the flex shortcut.

Learn about the flex-grow, flex-shrink, flex-basis, and flex properties of flexbox. 

flex-grow, flex-shrink, flex-basis, and flex  Properties

Learn about the flex-grow, flex-shrink, flex-basis, and flex properties of flexbox.

Before We Begin

Zombie Inline Block Heads

Dividing the Horde (into Columns)

Weird Flexbox, but Okay, Zombie

CSS Gridiron Zombies

Conclusion

flex-grow, flex-shrink, flex-basis, and flex Properties

Growing and shrinking zombies