1
2
3
4
5
CSS
.flexbox { display: flex; gap: 0.5em; flex-direction: row; /* kokeile row-reverse, column ja column-reverse */ flex-wrap: nowrap; /* kokeile wrap: silloin rivitetään eikä kutisteta */ } .lohko { border: 1px solid #23201c; padding: 0.5em; width: 15em; /* flex kutistaa tarvittaessa */ /* min-width: 15em; */ /* jos tämä on määrätty, ei kutisteta alle sen vaan ylimääräinen valuu ulos alueesta */ } /* order-ominaisuuden OLETUSARVO ON 0, ei 1. Arvo 2 siirtää tämän lohkon siis KAIKKIEN MUIDEN JÄLKEEN, koska muiden arvo on nolla. Jos haluat siirtää lohkon ensimmäiseksi, anna negatiivinen arvo. */ .lohko3 { order: 2; /* kokeile arvoa -1 */ background-color: #ffe9a8; } /* HUOM: order muuttaa vain sen, mitä silmä näkee. Ruudunlukija lukee ja sarkain etenee edelleen koodin mukaisessa järjestyksessä. */
HTML
<div class="flexbox"> <div class="lohko">1</div> <div class="lohko">2</div> <div class="lohko lohko3">3</div> <div class="lohko">4</div> <div class="lohko">5</div> </div>
Javascript
Konsoli