1
2
3
4
5
CSS
/* Lohkojen yhteisleveys on suurempi kuin käytettävissä oleva tila, joten flex joutuu kutistamaan niitä. */ .flexbox { display: flex; gap: 0.5em; } .lohko1 { flex-shrink: 4; /* kutistuu nelinkertaisesti lohkoon .lohko2 verrattuna */ width: 20em; border: 3px solid #23201c; padding: 0.5em; } .lohko2 { flex-shrink: 1; /* 1 on oletusarvo */ width: 20em; border: 3px solid #b3261e; padding: 0.5em; } .lohko3 { flex-shrink: 0; /* 0 tarkoittaa, ettei kutisteta lainkaan */ width: 30em; border: 3px solid #1f5c46; padding: 0.5em; }
HTML
<div class="flexbox"> <div class="lohko1">1</div> <div class="lohko2">2</div> <div class="lohko1">3</div> <div class="lohko2">4</div> <div class="lohko3">5</div> </div>
Javascript
Konsoli