A presentation at Joomladagen in in Zeist, Netherlands by Niels Leenheer
niels leenheer
@html5testflex
box
joomladagen 2017
joomla?
wat is flexbox?
assen
main axis
cross axis
start
end
start
end
containers en kinderen
</ul> ul { display: flex; }
start end start end
start end start end
start end start end
start end start end
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
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
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 { 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
.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
Flexbox is een krachtige CSS techniek die hand-in-hand samengaat met content management systemen. Het lijkt wel alsof ze voor elkaar gemaakt zijn. En juist in dit tijdperk van responsive design moet een theme flexibel zijn. Deze talk zal laten zien dat het gebruik van Flexbox niet alleen je themes mooier, maar ook robuster zal maken en kan helpen met responsiveness.
for free. You
can too.