Exploring Flexbox

4090 Truxel Road, Suite 200 • Sacramento, CA 95834 • Phone: (916) 567-1740 • Fax: (916) 290-9067 • symsoftsolutions.com

1

UnderstandingFlexbox


2

Mark Aplet

@visual28 [email protected]

Front-End Web Developer at SymSoft Solution


3

Flexbox Layout

Main Idea: allow the container to alter it’s items height width and order of appearance for better responsive layouts

Direction Agnostic Spotty support since 2009 Candidate Recommendation since 2012 Requires vendor prefix even in modern browsers Polyfill support not so great


4

Flexbox Module

Main Size

Cro

ss S

ize

Cro

ss A

xis

Main Axis

Cross Start

Cross End

Main Start Main End

1 2Flex Item

Flex Container

Flex Item


5

Flex Container

display: block display: inline display: inline-block

.container { display: flex; /* inline-flex */}


6

Flex Direction

Determines the axis orientation Defaults to row row, row-reverse, column,

column-reverse

.container { flex-direction: row;}

1 2 3

1

2

3

3

2

1

3 2 1


7

Flex Wrap

Tries to fit on one line by default Defaults to nowrap nowrap | wrap | wrap-reverse

.container { flex-wrap: wrap;}

1

3

2


8

Flex Flow

This is a shorthand flex-direction and flex-wrap properties, which together define the flex container's main axis and cross axes. Default is row nowrap

.container { flex-flow: row-reverse wrap;}


9

Justify Content

Defines the alignment along the main axis Helps distribute remaining free space around items Defaults to flex-start flex-start, flex-end, center,

space-between, space-around

.container { Justify-content: flex-start;}


10

Justify Content

1 32flex-start

1 32flex-end

1 32center

1 32space-between

1 32space-around


11

Justify Content

1 32space-around


12

Align Items

Defines the alignment along the cross axis• Vertical alignment

Think of it as justify-content for the cross axis Defaults to flex-start flex-start, flex-end, center, baseline, stretch

.container { align-items: flex-start;}


13

Align Items

1 2 3 4flex-start1

2 3 4

flex-end

1 2 3 4center 1 2 3 4stretch

baselinetext text text text


14

Align Content

Defines the distribution of space along the cross axis Similar to justify-content for the cross axis Defaults to flex-start flex-start, flex-end, center, baseline, stretch

.container { align-content: flex-start;}


15

Flex Items

Children elements of flex-container


16

Order

Controls the order items appear in the flex-container Use source order by default Default value is 0 Can use negative values e.g. -1

.item { order: 1;}

2 1 34


17

Flex Grow

Defines the ability for a flex item to grow if necessary Unitless value that represents a proportion Dictates amount of space it should take up Defaults to 0

.item { flex-grow: 1;}


18

Flex Grow

.item:nth-child(2) { flex-grow: 2;}

1 1 1

1 2 1

.item { flex-grow: 1;}


19

Flex Shrink

Defines the ability for a flex item to shrink if necessary

Unitless value that represents a proportion Defaults to 0

.item { flex-shrink: 1;}


20

Flex Basis

This defines the default size of an element before the remaining space is distributed

If set to 0, the extra space around content isn't factored in If set to auto, the extra space is distributed based on it's

flex-grow value

.item { flex-basis: auto;}


21

Flex Basis

short much longer shortAll Space Distributed(flex-basis:0)

1 1

short much longer shortExtra Space Distributed(flex-basis:auto)

1 1 1 1 2 2


22

Flex

Shorthand for flex-grow, flex-shrink and flex-basis combined

Recommended over setting individual properties Uses typical shorthand notaion

.item { flex: 1 1 auto;}


23

Flex/* 0 0 auto */flex: none;

/* One value, unitless number: flex-grow */flex: 2;

/* Two values: flex-grow | flex-basis */flex: 1 30px;

/* Two values: flex-grow | flex-shrink */flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */flex: 2 2 10%;


24

Align Self

Allows for individual items to be overridden

.item { flex-align: flex-start;}

1 2

3

4

flex-start

flex-end

.item:nth-child(3) { align-self: flex-end;}


25

Live Demo

Technology

Exploring Flexbox