what the flexbox? an intro to flexbox

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

http://codepen.io/lepittenger/pen/vyjeER/

3

http://codepen.io/lepittenger/full/MbGEaw/

4

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

http://codepen.io/lepittenger/details/pNONWY/30

http://codepen.io/lepittenger/details/pNONWY/31

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