FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims...

SPRING 2019CS 498RK

FLEXBOX

lay out content dynamically

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-flexbox/

Container/Parent Properties

DISPLAY

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container { diplay: flex; }

FLEX-DIRECTION

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container { flex-direction: row | row-reverse | column | column-reverse; }

FLEX-WRAP

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container { flex-wrap: nowrap | wrap | wrap-reverse; }

FLEX-FLOW

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container { flex-flow: <flex-direction> || <flex-wrap>; }

JUSTIFY-CONTENT

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container { justify-content:

flex-start | flex-end | center | space-between | space-around | space-evenly;

}

ALIGN-ITEMS

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container { align-items:

stretch | flex-start | flex-end | center | baseline;

}

ALIGN-CONTENT

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container { align-content:

flex-start | flex-end | center | stretch | space-between | space-around;

}

Item/Child Properties

ORDER

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.item { order: <integer>; }

FLEX-GROW/SHRINK/BASIS

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.item { flex-grow: <integer>; flex-shrink: <integer>; flex-basis: <length> | auto; }

FLEX

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.item { flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; }

ALIGN-SELF

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container { align-self:

auto | flex-start | flex-end | center | baseline | stretch;

}

RESOURCEShttps://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

https://flexboxfroggy.com/