Flexbox

niels leenheer
  @html5testflex box joomladagen 2017

joomla?

wat is   flexbox?

assen

main axis

cross axis

start

end

start

end

containers en kinderen

<ul>

 

</ul> ul {   display: flex;   }

start end start end

start end start end

start end start end

start end start end

<ul>   <li class="groen"></li>   <li class="oranje"></li>   <li class="rood" ></li>   </ul> ul {   display: flex;   }

richting

ul {   flex-direction: row;   }

ul {   flex-direction: row-reverse;   }

ul {   flex-direction: column;   }

ul {   flex-direction: column-reverse;   }

uitlijning

ul {   justify-content: flex-start;   }

ul {   justify-content: flex-end;   }

ul {   justify-content: center;   }

ul {   justify-content: space-between;   }

ul {   justify-content: space-around;   }

kruisuitlijning

ul {   align-items: stretch;   }

ul {   align-items: flex-start ;   }

ul {   align-items: center ;   }

ul {   align-items: flex-end ;   }

uitvullen

li {   flex: 0 1 auto;   }

li {   flex-grow: 0;   flex-shrink: 1;   flex-basis: auto;   }

li {   flex-grow: 1;   }

li.rood {   flex-grow: 2 ;   }

li {   flex-shrink: 1;   }

li {   flex-shrink: 1;   }

li {   flex-shrink: 1;   }

doorloop

li {   flex-shrink: 0;   }

ul {   flex- wrap: wrap;   }

li {   flex-grow: 1;   }

volgorde

1 2 3 li.groen {   order: 10;   }

1 2 3 li.rood {   order: -1;   }

wat kunnen   we met   flexbox doen?

een heleboel

flexbox   is niet voor   pagina opmaak!

navigatiebalk

<ul>   <li><a href=“#”>Home</a></li>   <li><a href=“#”>Programma</a></li>   ...   </ul> • Home   • Programma   • Sprekers   • Locatie

li { display: inline-block;   } Home Programma Sprekers Locatie

li { display: inline-block;   } Home Programma Sprekers Locatie

ul { text-align: center;   } Home Programma Sprekers Locatie

li { width: 25%;   } Home Programma Sprekers Locatie

li { width: 25%;   } Home Programma Sprekers Locatie

Home Programma Sprekers
Locatie ul { display: flex;   justify-content: space-between;   }     li {   flex: 0 0 auto;   }

ul { display: flex;   justify-content: space-between;   }     li {   flex: 0 0 auto;   } Home Programma Sprekers

Locatie

li {   flex: 0 0 auto;   } Home Programma Sprekers Locatie
Tickets

Home Programma Sprekers Locatie
Tickets li {   flex: 0 0 auto;   }

ul { justify-content: center;   }     li {   flex: 1 0 auto;   } Home Programma Sprekers Locatie
Tickets

ul { justify-content: center;   }     li {   flex: 1 0 auto;   } Home Programma Sprekers Locatie
Tickets

Home Programma Sprekers Locatie
Tickets

Home Programma Sprekers Locatie
Tickets

Home Programma Sprekers Locatie
Tickets

  Home                   Programma                   Sprekers                   Locatie

Tickets

  Home                   Programma                   Sprekers                   Locatie

Tickets

    Home                      Programma                      Sprekers                      Locatie

Tickets li#tickets {   flex: 0 0 auto;   }  

@media (min-width: 25em) {   li { flex: 0 0 auto; }   li#tickets {   margin-left: auto;   }   } Home Programma Sprekers Locatie
Tickets

@media (min-width: 25em) {   li { flex: 0 0 auto; }   li#tickets {   margin-left: auto;   }   } Home Programma Sprekers Locatie
Tickets

Home Programma Sprekers Locatie
Tickets

Home Programma Sprekers Locatie
Tickets

Home Programma Sprekers Locatie
Tickets

Home Programma
Sprekers ul {   flex-wrap: wrap;   } Locatie
Tickets

Home Programma
Sprekers ul {   flex-wrap: wrap;   } Locatie
Tickets

@media (max-width: 32em) { li {   flex: 0 0 50%;   } } Home
Programma Sprekers Locatie Tickets

@media (max-width: 32em) { li {   flex: 0 0 50%;   } } Home
Programma Sprekers Locatie Tickets

zoekbalk

<form>   <input type=text placeholder="Zoeken" >   <button type=submit>Zoek</button> </form>   Zoek Zoeken naar artikelen

<form>   <input type=text placeholder="Zoeken" >   <button type=submit>Zoek</button> </form>   Zoek Zoeken naar artikelen

<form>   <input type=text placeholder="Zoeken" >   <button type=submit>Zoek</button> </form>   Zoek Zoeken naar artikele n

<form>   <input type=text placeholder="Zoeken" >   <button type=submit>Zoek</button> </form>   Zoek Zoeken naar artikelen

Zoek Zoeken naar artikelen Zoek Zoeken naar artikelen Zoek Zoeken naar artikelen input { width: 85%; }   button { width: 15%; }

Zoeken naar artikelen Zoeken naar artikelen Zoeken naar … Zoek Zoek Zoek form { padding-right: 60px; }   input { width: 100%; }   button { position: absolute; right: 0; }

Zoeken naar artikelen Zoeken naar artikelen Zoeken naar … Zoeken Zoeken Zoeken form { padding-right: 60px; }   input { width: 100%; }   button { position: absolute; right: 0; }

form {   display: flex;   } Zoek Zoeken naar artikelen

input {   flex: 1 1 auto;   } Zoek Zoeken naar artikelen

input {   flex: 1 1 auto;   } Zoek Zoeken naar artikelen

input {   flex: 1 1 auto;   } Zoeken Zoeken naar artikelen

input {   flex: 1 1 auto;   } Zoeken Zoeken naar artikelen

input {   width: 0%;   flex: 1 1 auto;   } Zoeken Zoeken naar …

metadata

<dl class=“article-info”>   <dd class=“createdby”>Geschreven door Niels Leenheer</dd>   <dd class=“create”>1 april 2017</dd>   </dl>   1 april 2017 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare finibus et eu ex. Aenean pulvinar suscipit sem ut tempor. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio. In tincidunt aliquet justo, ut blandit leo aliquet a. Nunc faucibus sem ac sem Lorem ipsum dolor Geschreven door Niels Leenheer

dl { overflow: hidden; }   dd.createdby { float: left; }   dd.created { float: right; } Lorem ipsum dolor 1 april 2017 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare finibus et eu ex. Aenean pulvinar suscipit sem ut tempor. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio. In tincidunt aliquet justo, ut blandit leo aliquet a. Nunc faucibus sem ac sem Geschreven door Niels Leenheer

dl { overflow: hidden; }   dd.createdby { float: left; }   dd.created { float: right; } Lorem ipsum dolor Geschreven door Niels Leenheer 1 april 2017 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare finibus et eu ex. Aenean pulvinar suscipit sem ut tempor. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at

dl { overflow: hidden; }   dd.createdby { float: left; }   dd.created { float: right; } Lorem ipsum dolor Geschreven door Niels Leenheer 1 april 2017 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare

dl {   display: flex;   justify-content: space-between;   } Lorem ipsum dolor Geschreven door Niels Leenheer 1 april 2017 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare

dl {   display: flex;   justify-content: space-between;   } Lorem ipsum dolor Geschreven door Niels Leenheer 1 april 2017 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare finibus et eu ex. Aenean pulvinar suscipit sem ut tempor. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at

dl {   display: flex;   justify-content: space-between;   } 1 april 2017 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare finibus et eu ex. Aenean pulvinar suscipit sem ut tempor. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio. In tincidunt aliquet justo, ut blandit leo aliquet a. Nunc faucibus sem ac sem Lorem ipsum dolor Geschreven door Niels Leenheer

tabs

li {   padding: 2em 10em;   display: inline-block;   } Vrijdag 31 maart Zaterdag 1 april Zondag 2 april

li {   padding: 2em 10em;   display: inline-block;   } Vrijdag 31 maart Zaterdag 1 april Zondag 2 april

li {   padding: 2em 10em;   display: inline-block;   } Vrijdag 31 maart Zaterdag 1 april Zondag 2 april

ul { display: flex; }   li { flex: 1 1 auto; } Vrijdag 31 maart Zaterdag 1 april Zondag 2 april

ul { display: flex; }   li { flex: 1 1 auto; } Vrijdag 31 maart Zaterdag 1 april Zondag 2 april

li.today { order: -1; } Vrijdag 31 maart Zaterdag 1 april Zondag 2 april

blokken

<div class="blocks">   <div class="block"> ... </div>   <div class="block"> ... </div>   </div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare finibus et eu ex. Aenean pulvinar suscipit sem ut tempor. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio.

.block {   height: 10em;   } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac sapien at orci ornare finibus et eu ex. Aenean pulvinar suscipit sem ut tempor. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio.

.block {   height: 10em;   } Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt aliquet justo, ut blandit leo aliquet a. Nunc faucibus sem ac sem euismod vulputate. Nunc eleifend velit eu porta lacinia. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio.

.block {   height: 10em;   overflow: hidden;   } Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt aliquet justo, ut blandit leo aliquet a. Nunc faucibus sem ac sem euismod vulputate. Nunc Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio.

.block {   min-height: 10em;   } Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt aliquet justo, ut blandit leo aliquet a. Nunc faucibus sem ac sem euismod vulputate. Nunc eleifend velit eu porta lacinia. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio.

.blocks {   display: flex;   } Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt aliquet justo, ut blandit leo aliquet a. Nunc faucibus sem ac sem euismod vulputate. Nunc eleifend velit eu porta lacinia. Vestibulum augue nunc, facilisis vitae finibus ac, gravida at odio.

en nog   veel meer!

is flexbox   veilig om te   gebruiken?

ja *

drie specificaties display: box;   display: flexbox;   display: flex;

prefixes display: -webkit-box;   display: -moz-box;   display: box; display: -ms-flexbox; display: -webkit-flex;   display: flex;

browser support 29 28 9 12.1 12 11 laatste specificatie, unprefixed *

browser support 21 28 6.1 12.1 12 11 laatste specificatie, inclusief prefixes *

browser support 4 2 3.1 12.1 12 10 eerdere specificaties, inclusief prefixes *

progressive   enhancement

Zoeken naar artikelen Zoeken naar artikelen Zoeken naar … Zoek Zoek Zoek form { padding-right: 60px; }   input { width: 100%; }   button { position: absolute; right: 0; }

form { padding-right: 60px; }   input { width: 100%; }   button { position: absolute; right: 0; } @supports(display: flex) { form { display: flex; padding-right: 0; } input { width: 0%; flex: 1 1 auto; } button { position: static; } }

browser support 29 28 9 12.1 12 laatste specificatie, unprefixed, in combinatie met @supports

en mijn   grid systeem   dan?

grids zijn perfect   voor pagina opmaak

grids zijn perfect   voor pagina opmaak flexbox is ideaal   voor componenten

bootstrap 4

<div class="d-flex justify-content-start">   <div class="p-2">A</div>   <div class="p-2">B</div>   <div class="p-2 ml-auto">C</div>   </div>

bedankt! @html5test

niels leenheer   @html5testflex box joomladagen 2017