flexbox is well supported
- always on top of eachother
- give parent the dislay property of flex
- children block elements can be flexed around
- flex only goes one row deep
- can make a grid by subdividing flexboxes
- variety of ways to organize
- from display: flex elemetn
<.flexbox-container display: flex>
><.flexbox-item flexbox-item .flexbox-item flexbox-item-1>
><.flexbox-item flexbox-item .flexbox-item flexbox-item-2>
><.flexbox-item flexbox-item .flexbox-item flexbox-item-3>
- container is used for laying out spacing between items and positioning of items within container
- flex item properties are meant to override the container properties or to apply different fleble sizing to the elements
- main axis is horizontal when flex-direction set to row
- vice versa for column layout
- use jusitfy-content to align contents across main axis
- flex-start sets it to start of main axis
- center will center length of main axis
- space between puts space evenly between flex items
- space around is like space between but also includes all sides of the flex items across the main axis
- use align-items to align contents across cross axis
- default is stretch, which means they will grow as much as they can within the container's cross axis
- flex-start will set it to the start of the main axis
- center will do what its supposed to
- otherwise very difficult to do with css
- align-content is used only to align content across cross axis when you want multi-line containers
- flex-wrap:wrap in container will allow it to wrap
- very similar in use to justify-content
flex item properties are meant to override the container properties or to apply different fleble sizing to the elements
- flex-shrink: 0 will prevent items from shrinking at all
- flex-grow: 1 will have an item grow to take up all extra space
- multiple flex-grow:1 items will split the extra space evenly between them all
- flex-grow:2 items would get twice the amount of extra space as flex-grow:1 items
- flex-basis: 0 will have flexbox imagine that the item item's width is 0px before adding extra space
- align-self property allows you to override the cross-axis alignment of an item
- align-self: center vs align-items: stretch, for example
- order allows you to change the order of flex-items
- advised to not use because screen readers won't keep up
- have a container wraps flex items
- flex: {grow} {shrink} {basis}