Pro Yearly is on sale from $80 to $50! »

Flexbox @ Joomladagen 2017

Flexbox @ Joomladagen 2017

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.

De023a9aff4c7a5ede3a81e8c76f17b5?s=128

Niels Leenheer

April 02, 2017
Tweet

Transcript

  1. niels leenheer 
 @html5test fl ex box joomladagen 2017

  2. None
  3. None
  4. joomla?

  5. None
  6. wat is 
 flexbox?

  7. None
  8. assen

  9. main axis

  10. cross axis

  11. start

  12. end

  13. start

  14. end

  15. containers en kinderen

  16. <ul>
 <!-- hier gaan we items aan toevoegen --> 


    </ul> ul {
 display: flex;
 }
  17. start end start end

  18. start end start end

  19. start end start end

  20. start end start end

  21. <ul>
 <li class="groen"></li>
 <li class="oranje"></li>
 <li class="rood"></li>
 </ul> ul {


    display: flex;
 }
  22. richting

  23. ul {
 flex-direction: row;
 }

  24. ul {
 flex-direction: row-reverse;
 }

  25. ul {
 flex-direction: column;
 }

  26. ul {
 flex-direction: column-reverse;
 }

  27. uitlijning

  28. ul {
 justify-content: flex-start; 
 }

  29. ul {
 justify-content: flex-end; 
 }

  30. ul {
 justify-content: center; 
 }

  31. ul {
 justify-content: space-between; 
 }

  32. ul {
 justify-content: space-around; 
 }

  33. kruisuitlijning

  34. ul {
 align-items: stretch;
 }

  35. ul {
 align-items: flex-start;
 }

  36. ul {
 align-items: center;
 }

  37. ul {
 align-items: flex-end;
 }

  38. uitvullen

  39. li {
 flex: 0 1 auto;
 }

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


    }
  41. li {
 flex-grow: 1;
 }

  42. li.rood {
 flex-grow: 2;
 }

  43. li {
 flex-shrink: 1;
 }

  44. li {
 flex-shrink: 1;
 }

  45. li {
 flex-shrink: 1;
 }

  46. doorloop

  47. li {
 flex-shrink: 0;
 }

  48. ul {
 flex-wrap: wrap;
 }

  49. li {
 flex-grow: 1;
 }

  50. volgorde

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

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

  53. wat kunnen 
 we met 
 flexbox doen?

  54. een heleboel

  55. flexbox 
 is niet voor 
 pagina opmaak!

  56. navigatiebalk

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

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

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

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

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

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

  63. Home Programma Sprekers Locatie ul { display: flex;
 justify-content: space-between;


    }
 
 li {
 flex: 0 0 auto;
 }
  64. ul { display: flex;
 justify-content: space-between;
 }
 
 li {


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

    Locatie Tickets
  66. Home Programma Sprekers Locatie Tickets li {
 flex: 0 0

    auto;
 }
  67. ul { justify-content: center;
 }
 
 li {
 flex: 1

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

    0 auto;
 } Home Programma Sprekers Locatie Tickets
  69. Home Programma Sprekers Locatie Tickets

  70. Home Programma Sprekers Locatie Tickets

  71. Home Programma Sprekers Locatie Tickets

  72. Home Programma Sprekers Locatie Tickets

  73. Home Programma Sprekers Locatie Tickets

  74. Home Programma Sprekers Locatie Tickets li#tickets {
 flex: 0 0

    auto;
 }

  75. @media (min-width: 25em) {
 li { flex: 0 0 auto;

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

    }
 li#tickets {
 margin-left: auto;
 }
 } Home Programma Sprekers Locatie Tickets
  77. Home Programma Sprekers Locatie Tickets

  78. Home Programma Sprekers Locatie Tickets

  79. Home Programma Sprekers Locatie Tickets

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

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

  82. @media (max-width: 32em) { li {
 flex: 0 0 50%;


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


    } } Home Programma Sprekers Locatie Tickets
  84. zoekbalk

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

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

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

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

    artikelen
  89. Zoek Zoeken naar artikelen Zoek Zoeken naar artikelen Zoek Zoeken

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

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

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

  93. input {
 flex: 1 1 auto;
 } Zoek Zoeken naar

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

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

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

    artikelen
  97. input {
 width: 0%;
 flex: 1 1 auto;
 } Zoeken

    Zoeken naar…
  98. metadata

  99. <dl class=“article-info”>
 <dd class=“createdby”>Geschreven door Niels Leenhe <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 Lorem ipsum dolor Geschreven door Niels Leenheer
  100. 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 Geschreven door Niels Leenheer
  101. 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,
  102. 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
  103. 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
  104. 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,
  105. 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 Lorem ipsum dolor Geschreven door Niels Leenheer
  106. tabs

  107. li {
 padding: 2em 10em;
 display: inline-block;
 } Vrijdag 31

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

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

    maart Zaterdag 1 april Zondag 2 april
  110. ul { display: flex; }
 li { flex: 1 1

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

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

    april Zondag 2 april
  113. blokken

  114. <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.
  115. .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.
  116. .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.
  117. .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.
  118. .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.
  119. .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.
  120. en nog 
 veel meer!

  121. is flexbox
 veilig om te
 gebruiken?

  122. ja*

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

  124. prefixes display: -webkit-box;
 display: -moz-box;
 display: box; display: -ms-flexbox; display:

    -webkit-flex;
 display: flex;
  125. browser support 29 28 9 12.1 12 11 laatste specificatie,

    unprefixed *
  126. browser support 21 28 6.1 12.1 12 11 laatste specificatie,

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

    inclusief prefixes *
  128. progressive 
 enhancement

  129. Zoeken naar artikelen Zoeken naar artikelen Zoeken naar… Zoek Zoek

    Zoek form { padding-right: 60px; }
 input { width: 100%; }
 button { position: absolute; right: 0; }
  130. 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; } }
  131. browser support 29 28 9 12.1 12 laatste specificatie, unprefixed,

    in combinatie met @supports
  132. en mijn 
 grid systeem 
 dan?

  133. grids zijn perfect
 voor pagina opmaak

  134. grids zijn perfect
 voor pagina opmaak flexbox is ideaal 


    voor componenten
  135. 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>
  136. None
  137. bedankt! @html5test