Patrick Lid Monslaup
Technical manager & developer for Knowit Experience Bergen. Looking for a new job? Check out http://knowit.no/karriere
Flexing with Patrick
Do's and Dont's in flexbox
Hva flex er
Enkel måte å skape et grid system på med ren css
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.icon {
flex-basis: 140px; // width: 140px;
height: 140px;
}
Container
Definerer hvordan ting element skal flyte, og alignes.
Element
Velger selv sin basis-størrelse, og om hvordan den skal vokse.
.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;
}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
Alle moderne browsere støtter flex
Flex er godt dokumentert
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://philipwalton.github.io/solved-by-flexbox/
Navigasjon, subnavigasjon, og medie objekt
Fra dehistoriske.no
Grid systemer
Fra tafjord.no
Når bør man ikke bruke flex?
- Man trenger støtte for eldre systemer (IE9, ..)
- Om koden skal brukes i epostklienter
- Kunders brukerbase primært bruker eldre mobiler (e.g. brukerne er fra India, Afrika, osv
- Blackberry browser 10+ støtter flex!
- Kunden din bruker en ekstremt gammel ipad som ikke er oppdatert på flere år.
| Deklarasjon | Rett betydning | IE10 |
|---|---|---|
| (ingen) | 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
Hvordan bør man skrive flex?
- Skriv spesifikk flex kode
- Da unngår man problem med at eldre nettlesere har ulik default verdi, eller tolker det ulikt
- I.e. ikke bruk flex shorthand, skriv flex-basis, flex-grow, flex-shrink
- Browsertest underveis
- Lag små, uavhengige komponenter
Time to flex
Learn by doing
er det her man skal putte en bit.ly lenke?
Flexing a tweet
Help trump make tweets great again
Flexing many tweets
Hjelp nasa kjempe tilbake mot budsjett-kutt. De trenger å kunne vise flere tweets i et grid, og vil endre designet slik at de like-knappene er til høyre (ved flexing)
Flexing with Patrick (norwegian, deprecated)
By Patrick Lid Monslaup
Flexing with Patrick (norwegian, deprecated)
Flexing with Patrick is a crash course in mastering flexbox, with focus on useful patterns which you'll benefit from in any web project. The English version is more updated, look at it instead.
