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)

Made with Slides.com