display: flex;So as of now it seems like adding this code will basically align the content in the tweet. I don’t know how it does that, but I just see that it does.
flex-direction: row;Keep in mind that ‘row’ is the default value of flex-direction. You could also use ‘column’, ‘row-reverse’, or ‘column-reverse’ too.
When all the flex items don’t fit in a flex container, we can use the justify-content element and its array of values including: center, flex-start, flex-end, space-between, space-around, space-evenly.
Don’t overthink the function of all of these values, just use your basic (Western) intuition of our progression moving left to right; so flex-start would align everything left and flex-end would align it right. You should get the picture by now, you can play with these values on your own project.
The previous tasks were all dealing with the main axis of a flexbox. This next one is dealing with the cross axis, which is basically the opposite of everything main axis does.
So the ‘justify-content’ of cross axis is align-items. It has some of the same values, like center and flex-end, but it has two new ones, stretch (the default value, just how ‘row’ is for flex-direction’) and balance.
Since align-items is the technical opposite, that means while flex-end would originally align right, it now aligns down.
Next we have wrap property. The element ‘flex-wrap’ wraps items onto multiple lines from top-to-bottom if they are in rows and left-to-right if they are in columns. The values are ‘nowrap’ (default), ‘wrap’ and ‘wrap-reverse’
Flex-shrink does exactly what it says. The values are single numbers, but they are relative. So if one flex-shrink is 1, and the other is 3, the one with 3 will shrink 3x as much as the first one. So order is prioritized in these values. The same goes for flex-grow.
Flex-basis is what technically should’ve been first. This is what sets the initial size of an item before we adjust it. You can use the px, em, or % units. ‘Auto’ will size the item based on the content.
To put it all together, we can use an abbreviated version of the flex element.
flex: 1 5 200pxThe order of these numbers is, grow, shrink, and basis. So this example has a flex-grow of 1, flex-shrink of 5, and flex-basis of 200px.
We can also rearrange the order with a self-explained element
order: 1Just order them however you wish.
Lastly, there’s align-self. This takes all the same values as align-items and will also override and align-items properties.
What I Learned Today
- Flex-direction
- Justify-content
- Align-items
- Flex-shrink/grow
- Flex-basis
- Align-self
Concerns
So I have ZERO idea of what a flex item is. I don’t see how it’s any different from regular CSS graphics. It started off with Tweets, then moved onto complex graphics.
I’m doing CSS Grid next, which ties into flex, so hopefully it’ll tie together at the end of that.
Grant Abraham 