CSS Flexbox
Flexbox Model
#flex-container { border: 1px solid black; height: 200px; display: flex; flex-direction: column; You only need to use flex-direction if you need a column layout. It will automatically default to row alignment Choosing column FLIPS THE AXIS
#flex-direction: row (default) - justify-content: left to right -main axis is justify content (left to right) -align-items: top to bottom
#flex-direction: column -justify-content: top to bottom -main axis is justify content (top to bottom) -align-items: left to right
Write code in HTML document with 1 parent and 3 children boxes Hint: Use divs
<body> <div id="flex-container"> <div>box1</div> <div>box2</div> <div>box3</div> </div>
Display: Flex
Aligns boxes left to right on the same line All contents float inside of it and are smooshed to the left
Children Code
Flex-grow Flex-shrink Flex-basis
Flexbox Assignment Operators Display: flex;
Justify Content Align Items
Justify-content moves from (works with flex-direction) Align-items moves from (works with height)
Left to right Top to bottom
Every flex box has a default direction of?
Row Items automatically align from left to right (side by side) in a row You only need to use flex-direction if you need a column layout. It will automatically default to row alignment
What will happen when flex-direction is set to column?
The divs will stack on top of one another in a column
Why do we use flexbox?
To align sibling items in a containing element Configure the flex container to tell the parent and children how to align themselves
Flexbox Codes
display: flex; flex-direction: row; or column;
Play with Flex-direction and Justify-content go together
flex-direction: row-reverse; justify content: flex-start; flex-end; Row reverse will reverse the content
Justify-Content
justify-content: space betwen; justify-content: space around; justify-content: space evenly; justify-content: flex-start (default) justify-content: flex-end justify-content: center
