Patrick Lid Monslaup
Technical manager & developer for Knowit Experience Bergen. Looking for a new job? Check out http://knowit.no/karriere
Flexbox
The Right Way
Patrick Monslaup
Knowit Experience Bergen
patrick.monslaup@knowit.no
slides.com/patricklidmonslaup/flex
Filer til workshop: se slack eller
http://www.mediafire.com/file/665v9ua4900pm0g/flexbox-the-right-way.zip
What flex is
Easy way to create flexible layouts using css
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.icon {
flex-basis: 140px; // width: 140px;
height: 140px;
}
slides.com/patricklidmonslaup/flex
Container
Defines how elements should flow and align
Element
Defines its sizing and rules for growth.
.flex-container {
display: flex;
}
.flex-container > .flex-element {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;
// forkortes som "flex: 1 0 100px"
}
flex-direction: column-reverse;
flex-wrap: nowrap;
// flex-flow: column-reverse nowrap;
}slides.com/patricklidmonslaup/flex
Media components
<div class="comment">
<img class="comment__image"
src="" alt="">
<div class="comment__body">…</div>
</div>
.comment {
display: flex;
align-items: flex-start;
}
.comment__image {
margin-right: 1em;
}
.comment__body {
flex: 1;
}Live code example
Layout
All modern browsers support flex
slides.com/patricklidmonslaup/flex
Flex is well documented
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://philipwalton.github.io/solved-by-flexbox/
- https://github.com/philipwalton/flexbugs/
slides.com/patricklidmonslaup/flex
Navigation, subnav, and media objects
From dehistoriske.no
Grid layout
From tafjord.no
Highly responsive and tweakable components
From tafjord.no
.banner--right {
.banner__content {
order: 1;
}
.banner__image__container {
order: 2;
}
}Highly responsive components
From tafjord.no
.banner {
flex-flow: column nowrap;
}.banner {
position: relative;
}
.banner__image__container {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
}When should you not use flex?
- Old browsers must be supported (IE9, ..)
- The code will be used in emails
- Users primarily use old mobile phones (e.g. your users mainly come from africa, india, etc).
- The site needs to work perfectly for 99.99% of users (e.g. strict government sites or banking)
| Declaration | Correct meaning | IE10 |
|---|---|---|
| (none) | flex: 0 1 auto | flex: 0 0 auto |
| flex: 1 | flex: 1 1 0% | flex: 1 0 0px |
| flex: auto | flex: 1 1 auto | flex: 1 0 auto |
| flex: initial | flex: 0 0 auto | flex: 0 0 auto |
https://github.com/philipwalton/flexbugs
How should you write flex?
- Write specific code
- Some older browsers have wrong default values, so not specifying flex-properties will create bugs.
-
Browsertest before deploying
- No, testing in production is not a good idea and you should feel ashamed.
- Make small, independent components
Code
Learn by doing
Time to flex
Flexing a tweet
Help trump make tweets great again
Ignore typography, colors, margins etc. Focus on making the layout with flex.
Flexing many tweets
Help nasa fight budget cuts. They need show several tweets in a grid, and want to change the design by moving the date and like, share, and repost buttons.
Flex your products
Product cards are an integral part of most sites these days, and customers have come to expect smooth sizing.
Flexbox, The Right Way
By Patrick Lid Monslaup
Flexbox, The Right Way
Flexing with Patrick is a crash course in mastering flexbox, with focus on useful patterns which you'll benefit from in any web project.
