- flex
- parent/child selectors
- text decoration
- fonts
- overflows
- grid layout
- flexbox (not quite the same as flex)
- flex-wrap
- flex-direction
- flex-flow
- justify-content
- align-content and align-items
- box-shadow
Wait a second, i thought we did this last night? We discussed what flex means as a property, tonight we discuss the execution of the property in nice, clean layouts
- Keep in mind, flex is how the element reacts to changes, flexbox is a way of sorting items on the page in predictable ways
- can have 1 of three primary values (the others are just variants of these)
- wrap, nowrap, wrap-reverse
wrap is good for mobile sites, keeps things compact on smaller screens nowrap is good for desktop sites that have the flexbox implemented, but you want certain items to stay put wrap-reverse is for being cheeky, but it is good to know how it works
- wrap, nowrap, wrap-reverse
- you get to determine how the box flows on your page
- 4 primary values: column, row, column-reverse, row-reverse
flex-flow combines the values of flex-wrap and flex-direction
i'll walk you through a few examples of this
box-shadow:
takes 4 values, only 3 are necessary
[horizontal] [vertical] [blur-radius] [color]
- works with any size value, but keep them small
- works best with
emvalues between 0.1 and 0.9 - color can be designated by name, rgba(), or hexidecimal