### Flex Items In the last drip, we looked at flexbox and the flexbox container rules. Today we are going to look at the properties you can use on the children of a flex container, known as flex items. These properties allow you to set order and override group settings. We'll start by using the same basic page we were using yesterday. It's just a list of divs in a `main` container. I've brought the individual classes over that we use to target each item specifically. For styles, I'll also keep with what we created before, and there is nothing unexpected there. ```html Flexbox

Flexbox

``` ```css header { text-align: center; margin: 1rem; } main { background: lightblue; margin: 1rem; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: center; height: 20em; } main > div { width: 5rem; text-align: center; margin: .1rem; } div { background: yellow; } ``` ### order The `order` property lets you set what order each block is rendered in. This is great, because it means you can do things like render a menu later, but have it appear first in the code. This makes accessibility tasks much easier to tackle, and source order really matters for people using screen readers. There are a handful of things to know about order: * All items have an order of zero by default * You can set any integer as the order; this includes negative numbers * Lower numbers are rendered first * In cases of a tie, then items are rendered in source order Let's look at a rebellious example where we make our first item last and our last item first. Just by adding an order value of `-1` to `ten` and `1` to one, we've got them rendering that way. Easy right? Flexbox is pretty sweet. ```css div.ten { order: -1; } div.one { order: 1; } ``` ### align-self I use `align-self` constantly. It's a great way to get items positioned in just the right place without having to mess with nested position absolute/relative type approaches. Also this directive overwrites any settings from the flex container, so you can set a default for the group while having certain items be exceptions. `aligns-self` accepts all the same parameters as `align-items`, so I won't go through them again. For a quick example, lets override our current setting of center for a single item, and move div five to flex-end. ```css div.five { align-self: flex-end; } ``` This puts five at the bottom of the current row (`flex-end` in this case) thus overwriting the group setting of `center`. ### flex-grow So what if you want some items take up more space than others, but stretch and maintain roughly that ratio as the screen size changes? This happens a lot with multi column layouts, and inside of components with large buttons or inputs. `flex-grow` is the easy way to accomplish this. Flex items have a default flex grow of zero, meaning they won't grow by default. Giving an item a `1` value lets it take up the rest of the available space. ```css div.two, div.nine { background: lightyellow; flex-grow: 1; } ``` Checkout how divs two and nine stretch and work with the flex wrap setting. To get your ratios dialed in, remember that you can set `flex-grow` to any positive float, not just whole-numbered integers. We'll look more into how this is calculated in a moment. ### flex-shrink If you have a fixed width box, and need some items to shrink, then `flex-shrink` is a great option. I'll need to remove the `flex-wrap` before showing this one, otherwise they'll just go to the next line and not shrink. ```css main { /* snip */ /*flex-wrap: wrap;*/ } div.two, div.nine { /* snip */ flex-shrink: 2; } ``` You can see boxes two and nine shrinking, while the rest remain their proper size. If you ever need to stop a component from shrinking, setting its `flex-shrink` to zero will do just that. Let's revert this before moving on. ### flex-basis To set the initial size of a flex item use `flex-basis`. Width is actually a fall back for for this setting, so its best to just use flex-basis. Min and max width will still be respected when set, however. Note that flex basis just sets the initial width. Flex *will* change the size of the item unless you lock it in with both `flex-shrink` and `flex-grow`. There are a lot of options you can pass as a value to `flex-basis`. The main one that is actively used is a `width` measurement (so any px, rem etc will work). There are other values, including `content`, `max-content`, `min-content`, `fit-content`, and `stretch`. These use the intrinsic value of the existing content, and support can be spotty on these. I suggest avoiding these entirely. If you do need them, [MDN has docs](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) and be sure to check the [browser support](http://caniuse.com/#feat=intrinsic-width). ```css main > div { /* snip */ /* width: 5rem; removing this! */ flex-basis: 5rem; } div.one { /* snip */ flex-basis: 50%; } ``` You can see we have replaced our width with the `flex-basis` property, and as we scale the page the width is recalculated to match the given row. ### How flex-shrink and flex-grow use flex-basis Now that we have an understanding of `flex-shrink`, `flex-grow`, and `flex-basis`, we can talk about how the underlying calculations are done. A simplified version of this is that the browser takes the total linear length availible, subtracts all the flex items' `flex-basis` (along with their margins, etc) and gets a remaining space. If this number is positive, it's passed to flex grow, and the total flex-grow number is summed from all flex items, the remaining space is divided by that sum, then portioned out to each item by multiplying by its `flex-grow` value. The same type of process is used if the remaining space is negative, only the flex item size is reduced by the result of that multiple. This is why setting an item's grow and shrink values to zero locks in its size: the multiplied adjustment will always be zero. ## Shorthand I am often not a fan of CSS shorthand, as I think it does a poor job of communicating intent to future developers. Flexbox is in a slightly different situation. The spec actually recomends you use the shorthand, as it sets some reasonable defaults for you. ### flex-flow The first shorthand is for the flex contianer: `flex-flow`. You can pass two options to it. The first option is `row`, `column`, or the reverse version of either. The second option is the flex-wrap setting of either `wrap` or `nowrap`. ```css main { /* snip */ /* flex-direction: row; remove this */ /* flex-wrap: wrap; remove this */ flex-flow: row wrap; } ``` You can see when I replace my current CSS with the shorthand, we don't have any changes. This is exactly as exspected, yay! ### flex The second shorthand option in flexbox is for flex items, and it combines `flex-grow`, `flex-shrink` and `flex-basis` all into a single command of `flex`. If you just send a single value to `flex` it's rendered as the `flex-basis`. Two values are `flex-grow` and `flex-shrink`, while three values are `flex-grow` `flex-shrink` and `flex-basis`. I think think this is quite confusing to parse, So I typically just send either one or three values when I call `flex`. ```css main > div { /* snip */ flex: 5rem; } ``` ## Vertical Centering One more thing today: vertical centering. This used to be a giant pain, but flexbox has made it really easy. Let's take the simplest possible example: ```html Flexbox

Flexbox

``` ```css main { display: flex; align-items: center; justify-content: center; height: 100vh; } ``` The height is 100% of the viewport height `vh`, then we use both `align-items` and `justify-content` as centered. Vertical centering is that easy, and it responsively works on any screen size without any math or further intervention. ## Summary In this drip, we looked into the rules around flex items, and saw how easy it is to center content with flexbox. We examined how to manage size of flex items and how to override placement of individual items. We also looked into shorthand and an easy way to use flexbox to center content. Tomorrow we'll be examining real world usages of flexbox. See you then! ## Resources - [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - [Introduction to Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) - [Advanced layouts with flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox)