what the flexbox? an intro to flexbox
TRANSCRIPT
An Intro to FlexboxWhat the Flexbox?
Lauren Pittenger@laurenpittenger1
What is flexbox?A layout mode which positionselements on a page in a waythat is predictable and flexible. Doesn't use floats and marginsdon't collapse. Many designers find it easierto use.
2
Flexbox Layout Mode
5
Flex Container
display: flex
6
Flex Items
7
Main AxisThe main axis is the axis along which the
flex items follow each other.
8
Cross AxisThe cross axis is the axis perpendicular to
the main axis.
9
Main & Cross Sizes
10
Flex Container Properties
Flex Direction: RowDefines the main and cross axis and controls how flex items are placed in container.
flex-direction: row | row-reverse | column | column-reverse
11
Flex Container Properties
Flex Direction: Row ReverseDefines the main and cross axis and controls how flex items are placed in container.
flex-direction: row | row-reverse | column | column-reverse
12
Flex Container Properties
Flex Direction: ColumnDefines the main and cross axis and controls how flex items are placed in container.
flex-direction: row | row-reverse | column | column-reverse
13
Flex Container Properties
Flex Direction: Column ReverseDefines the main and cross axis and controls how flex items are placed in container.
flex-direction: row | row-reverse | column | column-reverse
14
Flexbox Layout Mode
15
Flex Container Properties
Justify Content: Flex StartDefines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
16
Flex Container Properties
Justify Content: Flex EndDefines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
17
Flex Container Properties
Justify Content: CenterDefines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
18
Flex Container Properties
Justify Content: Space BetweenDefines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
19
Flex Container Properties
Justify Content: Space AroundDefines how space is distributed along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around
20
Flex Container Properties
Flex Wrap: NowrapSpecifies whether items on a line should be forced onto one line or flow onto a next line.
flex-wrap: nowrap | wrap | wrap-reverse
21
Flex Container Properties
Flex Wrap: WrapSpecifies whether items on a line should be forced onto one line or flow onto a next line.
flex-wrap: nowrap | wrap | wrap-reverse
22
Flex Container Properties
Flex Wrap: Wrap ReverseSpecifies whether items on a line should be forced onto one line or flow onto a next line.
flex-wrap: nowrap | wrap | wrap-reverse
23
Align Items: Flex Start
Flex Container Properties
Defines how space is distributed along the cross axis.
align-items: flex-start | flex-end | center | baseline | stretch
24
Flex Container Properties
Align Items: CenterDefines how space is distributed along the cross axis.
align-items: flex-start | flex-end | center | baseline | stretch
25
Flex Container Properties
Align Items: BaselineDefines how space is distributed along the cross axis.
align-items: flex-start | flex-end | center | baseline | stretch
26
Flex Container Properties
Align Items: StretchDefines how space is distributed along the cross axis.
align-items: flex-start | flex-end | center | baseline | stretch
27
Align Content
stretch space-between space-around
flex-start flex-end center
Aligns a flex container’s lines on the cross axis when there is extra space along thecross axis. It has no effect on a single line of flex items.
align-content: flex-start | flex-end | center | space-between | space-around | stretch
28
Align Self
Flex Item Properties
Overrides align-items value. Ignored if flex item’s cross-axis margin is set to auto.
align-self: auto | flex-start | flex-end | center | baseline | stretch
29
Order
Flex item Properties
Specifies order items should appear within the flex container. Laid out in ascendingorder. Elements with the same order appear in the order of the source code.
order: <integer>
32
ResourcesCSS Tricks: A Complete Guide toFlexboxJoni Bologna Flexbox CheatsheetMDN Flexbox Layoutwhattheflexbox.comFlexbox FroggyDavid Walsh: Flexbox Layouts
33