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

▶
flexbox
SMART_READER_LITE
LIVE PREVIEW

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

Nov 05, 2022 474 likes •664 views

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

slide-1
SLIDE 1

SPRING 2019 CS 498RK

FLEXBOX

lay out content dynamically

slide-2
SLIDE 2

WHAT IS FLEXBOX?

Flexbox is a layout model which aims to make it easier to lay

  • ut 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.

slide-3
SLIDE 3

TERMINOLOGY

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

slide-4
SLIDE 4

Container/Parent Properties

slide-5
SLIDE 5

DISPLAY

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

slide-6
SLIDE 6

FLEX-DIRECTION

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

slide-7
SLIDE 7

FLEX-WRAP

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

slide-8
SLIDE 8

FLEX-FLOW

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

slide-9
SLIDE 9

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; }

slide-10
SLIDE 10

ALIGN-ITEMS

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

slide-11
SLIDE 11

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; }

slide-12
SLIDE 12

Item/Child Properties

slide-13
SLIDE 13

ORDER

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

  • rder: <integer>;

}

slide-14
SLIDE 14

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; }

slide-15
SLIDE 15

FLEX

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

slide-16
SLIDE 16

ALIGN-SELF

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

slide-17
SLIDE 17

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/