![Page 1: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/1.jpg)
CSS3 Layout
February 18, 2013
In Control Orlando
by Zoe Mickley Gillenwater@zomigi
zomigi.com
![Page 2: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/2.jpg)
2
What I do
BooksStunning CSS3:A Project-based Guide to the Latest in CSS
www.stunningcss3.com
Flexible Web Design:Creating Liquid and Elastic Layouts with CSS
www.flexiblewebbook.com
WebAccessibility specialist at AT&T
Visual designer
CSS developer and consultant
![Page 3: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/3.jpg)
3
the pasttable layout
![Page 4: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/4.jpg)
4
Problems with table layout
• Complicated/bulky markup• Accessibility problems• Slower browser rendering• Rigid designs• Spacer gifs
![Page 5: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/5.jpg)
5
the presentfloat layout
![Page 6: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/6.jpg)
6
Problems with float layout
• Difficulty with containment• Wrapping/float drop• Difficulty with equal-height columns• No float:center• Visual location somewhat tied to HTML
order
![Page 7: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/7.jpg)
7
the futurea whole mess o’ CSS3
![Page 8: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/8.jpg)
8
Floats of the future
• New values for float property• New ways to contain floats• New float-displace property
http://dev.w3.org/csswg/css3-box/
![Page 9: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/9.jpg)
9
New values for float property
.unicorn {float: right contour;
}
These include values like start and end to help with languages with RTL direction, but check out how the text wraps around this graphic when using the new contourvalue.
Pretty sweet, right? Almost as sweet as this rad unicorn pegasus.
![Page 10: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/10.jpg)
10
New ways to contain floats
p {min-height: contain-floats;
}
Current behavior: New behavior:
One potential way to get this new behavior:
![Page 11: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/11.jpg)
11
New ways to contain floats
p {clear-after: right;
}
Current behavior: New behavior:
Another way (if element has bottom border or padding):
![Page 12: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/12.jpg)
12
New ways to contain floats
p {clear: both after;
}
Current behavior: New behavior:
Or maybe just:
![Page 13: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/13.jpg)
13
Current float wrap behavior
• Floats lay over blocks• Lines get shortened
p {float-displace: line;
}
![Page 14: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/14.jpg)
14
Here’s when that sucks
![Page 15: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/15.jpg)
15
Fix with float-displace
ul {float-displace: indent;
}
![Page 16: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/16.jpg)
16
Another option for float wrap
• Floats do not lay over blocks
• Block’s width reduced
p {float-displace: block;
}
![Page 17: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/17.jpg)
17
CSS3 “content-flow” modules
• Multi-column Layout: flow a box’s content into multiple columns in that box
• Regions: flow content into multiple, separate boxes
• Exclusions and Shapes: make content flow around and within areas in more intricate ways than floating
![Page 18: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/18.jpg)
18
Multi-column Layoutwww.w3.org/TR/css3-multicol/
* with browser-specific prefixes
11.1
*10
* *
![Page 19: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/19.jpg)
19
Regionswww.w3.org/TR/css3-regions/
article {flow-into: orlando;
}#one, #two, #three {
flow-from: orlando;}
1
2
3
![Page 20: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/20.jpg)
20
Exclusions and Shapeshttp://dev.w3.org/csswg/css3-exclusions/
Pullquotes are gonna be everywhere. I can feel it.
.center {wrap-flow: both;
}
![Page 21: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/21.jpg)
21
Shapes
• Use SVG-like syntax or image URL to define contours
• Inside shapes apply to all blocks
• Outside shapes apply to floats and exclusions
Image from http://coding.smashingmagazine.com/2011/12/15/six-css-layout-features-to-look-forward-to/
![Page 22: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/22.jpg)
22
but where’s my
jetpack
![Page 23: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/23.jpg)
23
CSS3 grid-related modules
• Grid Alignment?• Template Layout?• Grid Template Layout?• Grid Layout—the winner!
![Page 24: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/24.jpg)
24
Grid Layouthttp://dev.w3.org/csswg/css3-grid-layout/
*
* partially, with -ms- prefix
X 10X X X
![Page 25: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/25.jpg)
25
Create a grid, method 1
.wrap {display: grid;grid-definition-columns: 200px 1fr 200px;grid-definition-rows: auto auto;
}
Column widths
Row heights
IE 10 also lets you use:-ms-grid-columns: 200px 1fr 200px;-ms-grid-rows: auto auto;
![Page 26: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/26.jpg)
26
Empty invisible grid
200px 200px1fr
auto
auto
![Page 27: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/27.jpg)
27
Place elements in that grid
nav { grid-column: 1 3; grid-row: 1; }#main { grid-column: 2; grid-row: 2; }aside { grid-column: 3; grid-row: 2; }#news { grid-column: 1; grid-row: 2; }
nav
news main aside
![Page 28: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/28.jpg)
28
Create a grid, method 2
.wrap {display: grid;grid-template: "a a a a"
"b c c d"}
a
b c d
![Page 29: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/29.jpg)
29
Create a grid, method 2
.wrap {display: grid;grid-template: "head head head head"
"side1 main main side2"}
head
side1 main side2
![Page 30: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/30.jpg)
30
Place elements in that grid
nav { grid-area: "head" }#main { grid-area: "main" }aside { grid-area: "side2" }#news { grid-area: "side1" }
head=nav
side1=#news
main=#mainside2=aside
![Page 31: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/31.jpg)
31
Rearrange the grid
@media screen and (max-width:500px) {.wrap { grid-template: "main side2"
"side1 side1" "head head"
}} main side2
side1
head
![Page 32: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/32.jpg)
32
demo time
![Page 33: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/33.jpg)
33
Flexible Box Layoutwww.w3.org/TR/css3-flexbox/
* with -webkit- prefix
12.1 X X X
*
† can be switched on in version 18+
†
![Page 34: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/34.jpg)
34
Which is which?
2009 display:box
2011 display:flexbox
Now display:flex
X
eh
See also http://css-tricks.com/old-flexbox-and-new-flexbox/
![Page 35: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/35.jpg)
35
How flexbox works
• Make boxes automatically grow to fill space or shrink to avoid overflow
• Give boxes proportional measurements• Lay out boxes in any direction• Align boxes on any side• Place boxes out of order from HTML
![Page 36: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/36.jpg)
36
Let’s try flexboxout on this page
![Page 37: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/37.jpg)
37
Original CSS
.feature {float: left;width: 30%;margin: 0 4.5% 0 0;padding: 130px 0 0 0;
}
![Page 38: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/38.jpg)
38
Create a flex container
<div class="feature-wrap"><div class="feature" id="feature-candy">
...</div><div class="feature" id="feature-pastry">
...</div><div class="feature" id="feature-dessert">
...</div></div>
.feature-wrap {display: flex;
}Make sure to also add the prefixed values and properties for now.
![Page 39: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/39.jpg)
39
How the CSS might really look
.feature-wrap {display: -ms-flexbox;display: -moz-flex;display: -webkit-flex;display: flex;
}
Optional for IE 10
Optional for testing in FF 18 and 19
Needed for Chrome and (someday) Safari
![Page 40: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/40.jpg)
40
Specify direction of flex items
.feature-wrap {display: flex;flex-direction: row;
}
Switch to vertical stacking:@media screen and (max-width:500px) {
.feature-wrap {display: flex;flex-direction: column;
}}
Default value
![Page 41: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/41.jpg)
41
Setting a point of reference
Main axis
Cro
ss axis
for flex-direction: row
![Page 42: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/42.jpg)
42
Make flex items flexible
.feature {flex: 1 1 0px;margin-right: 40px;padding: 130px 0 0 0; }
flex grow factor
![Page 43: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/43.jpg)
43
flex shrink factor
Make flex items flexible
.feature {flex: 1 1 0px;margin-right: 40px;padding: 130px 0 0 0; }
![Page 44: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/44.jpg)
44
flex basis
Make flex items flexible
.feature {flex: 1 1 0px;margin-right: 40px;padding: 130px 0 0 0; }
![Page 45: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/45.jpg)
45
Make flex items flexible
.feature {flex: 1 1 0px;margin-right: 40px;padding: 130px 0 0 0; }
Same as:.feature {
flex: 1;margin-right: 40px;padding: 130px 0 0 0; }
![Page 46: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/46.jpg)
46
Add a fourth feature box
<div class="feature-wrap"><div class="feature" id="feature-candy">
...</div><div class="feature" id="feature-pastry">
...</div><div class="feature" id="feature-dessert">
...</div><div class="feature" id="feature-bread">
...</div></div>
![Page 47: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/47.jpg)
47
All boxes adjust in width
![Page 48: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/48.jpg)
48
Don’t need to do this anymore
.2up .feature { width: 45% }
.3up .feature { width: 30% }
.4up .feature { width: 22% }
![Page 49: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/49.jpg)
49
Highlight a sale category
.sale { padding: 130px 20px 20px 20px;border-radius: 3px;background-color: hsla(0,0%,100%,.4);
}
What percentage width would I set to make this twice as wide as other boxes, if I weren’t using flex?
![Page 50: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/50.jpg)
50
Make sale box twice as wide
.sale {flex: 2;padding: 130px 20px 20px 20px;border-radius: 3px;background-color: hsla(0,0%,100%,.4);
}
![Page 51: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/51.jpg)
51
Default equal-height columns!
.feature-wrap {display: flex;align-items: stretch;
}
This is the default value, so we don’t need to actually set this property, but this shows you what it looks like.
![Page 52: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/52.jpg)
52
Vertical centering with ease!
.feature-wrap {display: flex;align-items: center;
}
![Page 53: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/53.jpg)
53
align-items(2011: flex-align)
flex-start(start)
flex-end(end)
center(center)
baseline(baseline)
stretch(stretch)
foo foo foo
![Page 54: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/54.jpg)
54
Visual order = HTML order
![Page 55: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/55.jpg)
55
Move sale box to front of line
.sale {order: -1;flex: 2;padding: 130px 20px 20px 20px;border-radius: 3px;background-color: hsla(0,0%,100%,.4);
}
Default order value is 0 for all flex items, so -1 moves this one before others
![Page 56: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/56.jpg)
56
New visual order, same HTML
![Page 57: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/57.jpg)
57
Accessibility implications
ProKeep content in logical order in HTML instead of structuring HTML to achieve visual layout
ConFocus/tab order won’t always match expected order, may jump around seemingly randomly
![Page 58: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/58.jpg)
58
Tab order = HTML order
12 3 4
![Page 59: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/59.jpg)
59
Expected tab order
1
2
3
4
5
6 7
8
9
![Page 60: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/60.jpg)
60
Frustrating mystery tab order
1
8
9
3
4
6 5
7
2
![Page 61: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/61.jpg)
61
use the order property for
goodnot evil
![Page 62: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/62.jpg)
62
Columns are too narrow
![Page 63: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/63.jpg)
63
Create multi-line flex container
.feature-wrapper {display: flex;flex-wrap: wrap;
}.sale {
order: -1;flex: 1 1 100%;margin: 0 0 20px 0;padding: 130px 20px 20px 20px;border-radius: 3px;background-color: hsla(0,0%,100%,.4);
}
![Page 64: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/64.jpg)
64
Flex items can now wrap
![Page 65: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/65.jpg)
65
Change icon position
.sale {order: -1;flex: 1 1 100%;margin: 0 0 20px 0;padding: 20px 20px 1px 170px;border-radius: 3px;background-color: hsla(0,0%,100%,.4);background-position: 20px 0;
}
![Page 66: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/66.jpg)
66
Final layout
![Page 67: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/67.jpg)
67
use flexbox now for
progressive enhancement
![Page 68: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/68.jpg)
68
How can I make this form:
• Display on a single line with image• Vertically centered with image• Span full-width of container
![Page 69: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/69.jpg)
69
Let’s try inline-block
#order img, #order form { display: inline-block; vertical-align: middle; }
<div id="order"><img src="cake.png"...><form>
<label for="message">...</label><input type="text" id="message"...><input type="submit" value="add to cart">
</form></div>
![Page 70: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/70.jpg)
70
Inline-block achieves:
Display on a single line with imageVertically centered with imageSpan full-width of container
X
![Page 71: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/71.jpg)
71
Different units make life hard
PixelsEmsSome mystery percentage
![Page 72: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/72.jpg)
72
Make the text input flex
#order, #order form {display: flex;align-items: center; }
#order form {flex: 1; }
#order #message {flex: 1;min-width: 7em;margin: 0 5px; }
Make outer div and form into flex containers
Vertically center kiddos
Make form take up all space next to image
Make text input take up all space in form left after label and button
But don’t let it get crazy-small
![Page 73: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/73.jpg)
73
Use inline-block with flexbox
![Page 74: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/74.jpg)
74
Use inline-block with flexbox
#order img, #order form { display: inline-block;vertical-align: middle; }
#order, #order form {display: flex;align-items: center; }
#order form {flex: 1; }
#order #message {flex: 1;min-width: 7em;margin: 0 5px; }
![Page 75: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/75.jpg)
75
Full-width nav bar
nav ul {display: table;width: 100%;margin: 0;padding: 0;list-style: none; }
nav li {display: table-cell;text-align: center; }
![Page 76: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/76.jpg)
76
Not so hot with no backgrounds
Don’t like these gaps
Uneven spacing
![Page 77: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/77.jpg)
77
Even spacing with flexbox
nav ul {display: flex;justify-content: space-between;margin: 0;padding: 0;list-style: none; }
![Page 78: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/78.jpg)
78
justify-content(2011: flex-pack)
space-around(distribute)
flex-end(end)
center(center)
flex-start(start)
space-between(justify)
![Page 79: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/79.jpg)
79
Use inline-block with flexbox
![Page 80: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/80.jpg)
80
Use inline-block with flexbox
nav ul {display: flex;justify-content: space-between;margin: 0;padding: 0;list-style: none;text-align: center;
}nav li {
display: inline-block;}
![Page 81: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/81.jpg)
81
Or use Modernizr script
nav ul {display: table;width: 100%;margin: 0;padding: 0;list-style: none;
}.flexbox nav ul {
display: flex;}
nav li {display: table-cell;
}.flexbox nav li {
display: list-item;}
http://modernizr.com
![Page 82: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/82.jpg)
82
prepare for the
future
![Page 83: css3-layout inctrl PDF - zomigi.comCSS3 “content-flow” modules • Multi-column Layout: flow a box’s content into multiple columns in that box • Regions: flow content into](https://reader030.vdocument.in/reader030/viewer/2022040810/5e50969a05a92d4a52729594/html5/thumbnails/83.jpg)
83
Learn more
Download slides and get links at http://zomigi.com/blog/css3-layout
Zoe Mickley Gillenwater@[email protected] | stunningcss3.com | flexiblewebbook.com
Title photo by Gilderic Photography (http://www.flickr.com/photos/gilderic/6885830288/)Rocket icon by Jason Peters, fire icon by James Bond Icons, both from The Noun Project