CSS Flexbox

¡Supera tus tareas y exámenes ahora con Quizwiz!

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


Conjuntos de estudio relacionados

Mapa - La ubicación de los lugares

View Set

10 Basic Timer Control: On-delay and off-delay

View Set

Oregelbundna verb: catch, choose, come, creep, cut, do, draw, dream, drink, drive

View Set

A&P (Ch. 10 muscle tissue) w/prac questions

View Set

Addiction: Exemplar 22.B Nicotine Addiction

View Set

Advance auto steering assessment

View Set