I think the biggest obstacle to getting started with flexbox is not being able to picture how to use it, because you’re stuck thinking in terms of what was possible with floats and other old layout methods. It was the same when we switched from tables to CSS layout, and from fixed to fluid layout—you had to make a mental shift to start thinking in terms of the new possibilities and approaches to old problems.
Flexbox lets you do lots of things you haven’t been able to do before, and some things you could do before but now in a simpler way. Once you see what flexbox can do in the real world, you can start picturing how to use it in your own work to solve real RWD problems today. Flexbox can be tricky to wrap your head around at first, but once you’ve learned it, it’s an incredibly quick, cheap way for you to add more responsiveness to your components.
14. My copy of that form
Same floats, same percentage widths
15. The trouble with explicit sizing
Since the select and button are sized by a
percentage, not sized automatically by their
content, this can happen:
Box too small for its content Box too big for its content
16. Use the flex property instead
Tells browser starting size (including content
size) and whether item can grow or shrink
width: 33.333%
flex: auto
Fill up remaining space
width: 16.666%
flex: none
Size to content exactly
17. Form fields are a pain in the butt
The fields and button don’t all match each
other exactly in height
18. Fix alignment with flexbox
Turn each field wrapper into flex container so
field inside will stretch to match height of its
line:
.flexbox .jobs-form_field-wrapper {
display: flex;
align-items: stretch; /* default */
width: auto;
}
Fields misaligned without flexbox Fields match height due to align-items
21. Automatic breakpoint with flexbox
Booking’s responsive customer service form
doesn’t use any media queries
http://www.booking.com/content/cs.html
22. All of the CSS for those 2 layouts
form.cs-message {
display: flex;
flex-flow: row wrap;
margin-right: -10px;
}
input.cs-message__text {
flex: 1 0 40%;
width: 43%;
float: left;
margin-right: 10px;
padding: 8px 10px;
}
1 property creates
2 responsive layouts,
both always full width
23. Taking advantage of variable space
Task: add a
message about
low availability
of the room
price shown:
“We have only X
left on our site!”
How about right here
in this lovely big gap?
24. Taking advantage of variable space
Problem: the gap
is not always big
enough to hold a
sentence of text
25. Taking advantage of variable space
Solution: use
flexbox to place
text beside price
when space
allows; otherwise,
it can wrap below
price
33. Reordering mobile content
In RWD, narrow-view
(mobile) stacking order
doesn’t always match
needed HTML order for
wide-view (desktop)
layout
Keep HTML order needed
for desktop and use
flexbox order property
only on mobile, since
browser support is better
and layout is simpler
there
Problem Solution