1
2
3
4
5
CSS
.flexbox { display: flex; gap: 0.5em; } .lohko1 { flex-grow: 2; /* saa kaksinkertaisen osuuden ylijäävästä tilasta verrattuna lohkoon .lohko2 */ border: 3px solid #23201c; padding: 0.5em; } .lohko2 { flex-grow: 1; border: 3px solid #b3261e; padding: 0.5em; } .lohko3 { flex-grow: 0; /* 0 on oletusarvo: ei laajene lainkaan */ width: 15em; /* ilman tätä olisi vain sisältönsä levyinen */ border: 3px solid #1f5c46; padding: 0.5em; } /* Sama lyhennemerkinnällä: .lohko1 { flex: 2; } vastaa flex: 2 1 0 .lohko3 { flex: none; } vastaa flex: 0 0 auto */
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