Upload
others
View
20
Download
0
Embed Size (px)
Citation preview
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/