11
12
13
21
22
23
31
32
33
41
42
43
CSS
.main { /* useampi sisäkkäinen flex-box, ulompi asettaa sisemmät rinnakkain ja venyttää */ display: flex; flex-wrap: wrap; height: 5em; align-items: stretch; } /* asetetaan jokaiselle sama leveys, border, margin */ .main > div { width: 12em; display: flex; border: 3px solid black; margin-right: 1em; } .main > div:nth-child(1) { align-items: stretch; /* venyttää */ justify-content: space-between; } .main > div:nth-child(2) { align-items: flex-start; /* tasaa alkuun */ justify-content: space-around; } .main > div:nth-child(3) { align-items: flex-end; /* tasaa loppuun */ justify-content: space-evenly; } .main > div:nth-child(4) { align-items: center; /* keskittää */ justify-content: center; } div > div > div { border: 2px solid red; padding: 5px; margin: 5px; width: 1.5em; text-align: center; } .omapaikka { align-self: start; }
HTML
<div class="main"> <div> <div>11</div> <div>12</div> <div>13</div> </div> <div> <div>21</div> <div>22</div> <div>23</div> </div> <div> <div>31</div> <div>32</div> <div>33</div> </div> <div> <div class="omapaikka">41</div> <div>42</div> <div>43</div> </div> </div>
Javascript
Konsoli