flexbox - uiuc-web-programming.github.io · what is flexbox? flexbox is a layout model which aims...
TRANSCRIPT
![Page 1: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/1.jpg)
SPRING 2019CS 498RK
FLEXBOX
lay out content dynamically
![Page 2: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/2.jpg)
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.
![Page 3: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/3.jpg)
TERMINOLOGY
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
![Page 4: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/4.jpg)
Container/Parent Properties
![Page 5: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/5.jpg)
DISPLAY
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container { diplay: flex; }
![Page 6: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/6.jpg)
FLEX-DIRECTION
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container { flex-direction: row | row-reverse | column | column-reverse; }
![Page 7: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/7.jpg)
FLEX-WRAP
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container { flex-wrap: nowrap | wrap | wrap-reverse; }
![Page 8: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/8.jpg)
FLEX-FLOW
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container { flex-flow: <flex-direction> || <flex-wrap>; }
![Page 9: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/9.jpg)
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;
}
![Page 10: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/10.jpg)
ALIGN-ITEMS
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container { align-items:
stretch | flex-start | flex-end | center | baseline;
}
![Page 11: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/11.jpg)
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;
}
![Page 12: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/12.jpg)
Item/Child Properties
![Page 13: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/13.jpg)
ORDER
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.item { order: <integer>; }
![Page 14: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/14.jpg)
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; }
![Page 15: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/15.jpg)
FLEX
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.item { flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; }
![Page 16: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/16.jpg)
ALIGN-SELF
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container { align-self:
auto | flex-start | flex-end | center | baseline | stretch;
}
![Page 17: FLEXBOX - uiuc-web-programming.github.io · WHAT IS FLEXBOX? Flexbox is a layout model which aims to make it easier to lay out and align elements dynamically. Main Idea: Containers](https://reader031.vdocuments.us/reader031/viewer/2022040308/5f042dac7e708231d40cb30a/html5/thumbnails/17.jpg)
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/