Slide 1
Slide 1 text
Sallie Goetsch • WordCamp Sacramento 2016
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 2
Slide 2 text
SLIDES:
https://speakerdeck.com/wpfangirl/falling-
in-love-with-flexbox
CODE: https://gist.github.com/wpfangirl/
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 3
Slide 3 text
CSS Flexible Box Layout Module Level 1
Sallie Goetsch • WP Fangirl • wpfangirl.com
https://www.w3.org/TR/css-flexbox-1/
The specification describes a CSS box model optimized
for user interface design. In the flex layout model, the
children of a flex container can be laid out in any
direction, and can “flex” their sizes, either growing to fill
unused space or shrinking to avoid overflowing the
parent. Both horizontal and vertical alignment of the
children can be easily manipulated. Nesting of these
boxes (horizontal inside vertical, or vertical inside
horizontal) can be used to build layouts in two
dimensions.
Slide 4
Slide 4 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 5
Slide 5 text
Flexbox makes your browser
calculate how many items fit
across the screen, how wide
each one should be, and
where to put them.
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 6
Slide 6 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 7
Slide 7 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 8
Slide 8 text
.flex-container {
display: flex;
}
.flex-item {
flex: 0 1 auto;
}
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 9
Slide 9 text
Terminology & Defaults to Orient You
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 10
Slide 10 text
The div immediately
surrounding the items you
want to flex.
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 11
Slide 11 text
• display:flex
• flex-direction
• flex-wrap
• align-content
• align-items
• justify-content
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 12
Slide 12 text
display: flex
Sallie Goetsch • WP Fangirl • wpfangirl.com
Without this, flexbox doesn’t
work. All the other properties
have defaults.
Slide 13
Slide 13 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
Origin
Slide 14
Slide 14 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 15
Slide 15 text
• wrap Items will wrap into
multiple rows when there are
too many to fit on one line.
• nowrap Items will shrink as
far as possible. Content may
overflow.
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 16
Slide 16 text
Positions flex items parallel
to flex-direction
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 17
Slide 17 text
Positions items perpendicular
to flex-direction.
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 18
Slide 18 text
Positions rows/columns within
the flex container.
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 19
Slide 19 text
Any ‘in-flow’ child of a flex
container, e.g.
,
,
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 20
Slide 20 text
• flex-grow
• flex-shrink
• flex-basis
• order
• align-self
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 21
Slide 21 text
0 Item does not grow
1 Item grows at 1:1 with
other items
2 Item grows at 2:1 with
other items
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 22
Slide 22 text
0 Item does not shrink
1 Item shrinks at 1:1 with
other items
2 Item shrinks at 2:1 with
other items
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 23
Slide 23 text
flex: 0 1 auto;
equals
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 24
Slide 24 text
Flex-basis should be in
pixels rather than % if you
want your flex items to wrap.
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 25
Slide 25 text
• Determines display order of
items
• Default is 0
• Negative numbers come
before positive numbers
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 26
Slide 26 text
• Positions the individual item
perpendicular to flex-
direction, irrespective of the
align-items property on the
flex container.
• Takes the same arguments as
align-items
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 27
Slide 27 text
Because that stuff we just
saw is way too confusing.
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 28
Slide 28 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
No transforms. No messing
about with padding. Just flexbox.
Slide 29
Slide 29 text
display: flex;
align-items:
center;
justify-content:
center;
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 30
Slide 30 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 31
Slide 31 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
align-items: flex-start
Slide 32
Slide 32 text
align-items: stretch
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 33
Slide 33 text
justify-content: space-between
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 34
Slide 34 text
flex-wrap: wrap;
Sallie Goetsch • WP Fangirl • wpfangirl.com
Desktop View
Slide 35
Slide 35 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
1024px
Slide 36
Slide 36 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 37
Slide 37 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 38
Slide 38 text
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 150px;
}
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 39
Slide 39 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 40
Slide 40 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 41
Slide 41 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 42
Slide 42 text
.flex-container:nth-
of-type(odd) .image
{ order: -1;}
.flex-container:nth-
of-type(even) .image
{ order: 1;}
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 43
Slide 43 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 44
Slide 44 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 45
Slide 45 text
.flex-container {
display: flex;
align-items:
stretch;
justify-content:
space-between;
}
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 46
Slide 46 text
.flex-item {
flex: 1 1 320px;
display:flex;
flex-direction:column;
justify-content:
space-between;
}
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 47
Slide 47 text
.buttons {
align-self:center;
margin-top:auto;
margin-bottom: 20px;
}
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 48
Slide 48 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
http://caniuse.com/#feat=flexbox
Slide 49
Slide 49 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
https://github.com/jonathantneal/flexibility
Slide 50
Slide 50 text
• A Complete Guide to Flexbox
• Flexbox Froggy
• Ultimate Flexbox Cheat Sheet
• What the Flexbox?
• Smashing Book 5:
Real Life Responsive Web Design
Sallie Goetsch • WP Fangirl • wpfangirl.com
Slide 51
Slide 51 text
Sallie Goetsch • WP Fangirl • wpfangirl.com
Email [email protected]
Website https://wpfangirl.com
Twitter @salliegoetsch
GitHub https://github.com/wpfangirl
SpeakerDeck https://speakerdeck.com/wpfangirl
Meetup http://www.meetup.com/Eastbay-
WordPress-Meetup/