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. 2.
  2. 3.
  3. 4.
  4. 5.
  5. 7.
  6. 8.
  7. 11.
  8. 12.

    end

  9. 13.
  10. 14.

    end

  11. 16.

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


    </ul> ul {
 display: flex;
 }
  12. 22.
  13. 38.
  14. 46.
  15. 50.
  16. 64.

    ul { display: flex;
 justify-content: space-between;
 }
 
 li {


    flex: 0 0 auto;
 } Home Programma Sprekers Locatie
  17. 67.

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

    0 auto;
 } Home Programma Sprekers Locatie Tickets
  18. 68.

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

    0 auto;
 } Home Programma Sprekers Locatie Tickets
  19. 75.

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

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

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

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

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


    } } Home Programma Sprekers Locatie Tickets
  22. 83.

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


    } } Home Programma Sprekers Locatie Tickets
  23. 84.
  24. 89.

    Zoek Zoeken naar artikelen Zoek Zoeken naar artikelen Zoek Zoeken

    naar artikelen input { width: 85%; }
 button { width: 15%; }
  25. 90.

    Zoeken naar artikelen Zoeken naar artikelen Zoeken naar… Zoek Zoek

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

    Zoeken naar artikelen Zoeken naar artikelen Zoeken naar… Zoeken Zoeken

    Zoeken form { padding-right: 60px; }
 input { width: 100%; }
 button { position: absolute; right: 0; }
  27. 98.
  28. 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
  29. 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
  30. 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,
  31. 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
  32. 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
  33. 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,
  34. 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
  35. 106.
  36. 110.

    ul { display: flex; }
 li { flex: 1 1

    auto; } Vrijdag 31 maart Zaterdag 1 april Zondag 2 april
  37. 111.

    ul { display: flex; }
 li { flex: 1 1

    auto; } Vrijdag 31 maart Zaterdag 1 april Zondag 2 april
  38. 113.
  39. 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.
  40. 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.
  41. 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.
  42. 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.
  43. 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.
  44. 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.
  45. 122.

    ja*

  46. 129.

    Zoeken naar artikelen Zoeken naar artikelen Zoeken naar… Zoek Zoek

    Zoek form { padding-right: 60px; }
 input { width: 100%; }
 button { position: absolute; right: 0; }
  47. 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; } }
  48. 136.