FLEXBOX la y ou t conten t dynamicall y WHAT IS FLEXBOX? Flexbox is - PowerPoint PPT Presentation

CS 498RK SPRING 2019 FLEXBOX la y ou t conten t dynamicall y

WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers have the ability to adjust their content dynamically. Flexbox is direction-agnostic : can accommodate both horizontal and vertical layouts.

TERMINOLOGY https:/ /css-tricks.com/snippets/css/a-guide-to- fl exbox/

Containe r /Paren t Prope r tie s

DISPLAY .container { diplay: flex; } https:/ /css-tricks.com/snippets/css/a-guide-to- fl exbox/

FLEX-DIRECTION .container { flex-direction: row | row-reverse | column | column-reverse; } https:/ /css-tricks.com/snippets/css/a-guide-to- fl exbox/

FLEX-WRAP .container { flex-wrap: nowrap | wrap | wrap-reverse; } https:/ /css-tricks.com/snippets/css/a-guide-to- fl exbox/

FLEX-FLOW .container { flex-flow: <flex-direction> || <flex-wrap>; } https:/ /css-tricks.com/snippets/css/a-guide-to- fl exbox/

JUSTIFY-CONTENT .container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; } https:/ /css-tricks.com/snippets/css/a-guide-to- fl exbox/

ALIGN-ITEMS .container { align-items: stretch | flex-start | flex-end | center | baseline; } https:/ /css-tricks.com/snippets/css/a-guide-to- fl exbox/

ALIGN-CONTENT .container { align-content: flex-start | flex-end | center | stretch | space-between | space-around; } https:/ /css-tricks.com/snippets/css/a-guide-to- fl exbox/

Ite m /Chil d Prope r tie s

ORDER .item { order: <integer>; } https:/ /css-tricks.com/snippets/css/a-guide-to- fl exbox/

FLEX-GROW/SHRINK/BASIS .item { flex-grow: <integer>; flex-shrink: <integer>; flex-basis: <length> | auto; } https:/ /css-tricks.com/snippets/css/a-guide-to- fl exbox/

FLEX .item { flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; } https:/ /css-tricks.com/snippets/css/a-guide-to- fl exbox/

ALIGN-SELF .container { align-self: auto | flex-start | flex-end | center | baseline | stretch; } https:/ /css-tricks.com/snippets/css/a-guide-to- fl exbox/

RESOURCES https://css-tricks.com/snippets/css/a-guide-to- flexbox/ https://developer.mozilla.org/en-US/docs/Learn/ CSS/CSS_layout/Flexbox https://flexboxfroggy.com/