#html #css #flexbox
Вопрос:
Я пытаюсь поместить .rij_lessenrooster
.rij_weekdagen
его так, чтобы он был центрирован под каждым днем. Учитель сказал мне создать столбец, а затем попробовать его, но это ни в чем не помогло. .rij_weekdagen
Всегда справа. Я также пытался сделать это с помощью position, но это ни к чему не привело. Я пытался вставить .rij_lessenrooster
justify-content: space-around
; но тогда это еще больше.
.klasnaam {
text-align : center;
font-weight : bold;
}
.rij_lessenrooster {
display : flex;
flex-direction : row;
justify-content : space-between;
align-items : center;
}
.rij_weekdagen {
display : flex;
flex-direction : row;
justify-content : space-around;
border-bottom : 1px solid;
}
.boven {
display : flex;
flex-direction : column;
margin-bottom : 60px;
}
<div class="container">
<div class="klasnaam">5I</div>
<div class="rij_weekdagen">
<div class="weekdag">Maandag</div>
<div class="weekdag">Disndag</div>
<div class="weekdag">Woensdag</div>
<div class="weekdag">Donderdag</div>
<div class="weekdag">Vrijdag</div>
</div>
<div class="rij_lessenrooster">
<div class="uur_container">
<div class="uur">
<div class="boven">8u25</div>
</div>
<div class="uur">
<div class="boven">9u15</div>
<div class="beneden">10u05</div>
</div>
</div>
<div class="vak uur_2">
<div class="uur_1 nederlands">
<span class="vaknaam">Nederlands</span><br> Verheyen
<br> 207
</div>
<div class="uur_1 gescheidenis">
<span class="vaknaam">Geschiedenis</span><br> De Coster<br> 207
</div>
</div>
<div class="vak uur_2 frans">
<span class="vaknaam">Frans</span><br> Heylen
<br> 207
</div>
<div class="vak uur_2">amp;nbsp;</div>
<div class="vak uur_2 wiskunde">
<span class="vaknaam">Wiskunde</span><br> Awadhpersad
<br> 204
</div>
<div class="vak uur_2 wiskunde">
<span class="vaknaam">Wiskunde</span><br> Awadhpersad
<br> 207
</div>
</div>
<div class="rij_lessenrooster">
<div class="uur_container">
<div class="uur">
<div class="boven">10u20</div>
</div>
<div class="uur">
<div class="boven">11u10</div>
</div>
</div>
<div class="vak uur_2 lbv">
<span class="vaknaam">LBV</span><br> Claes
<br> NCZ
<br> 110
</div>
<div class="vak uur_2 lbv">
<span class="vaknaam">LBV</span><br> Maes
<br> KG
<br> 210
</div>
<div class="vak uur_2 lbv">
<span class="vaknaam">LBV</span><br> V. Exa.<br> Islam
<br> 207
</div>
<div class="vak uur_2 lbv">
<span class="vaknaam">LBV</span><br> D. Pile.<br> PG
<br> 202
</div>
<div class="vak uur_2 nederlands">
<span class="vaknaam">Nederlands</span><br> Verheyen
<br> 207
</div>
<div class="vak uur_2 infromatica">
<span class="vaknaam">TI-info</span><br> Leys
<br> 109
</div>
<div class="vak uur_2 infromatica">
<span class="vaknaam">TI-info</span><br> Mertens
<br> 109
</div>
<div class="vak uur_2 infromatica">
<span class="vaknaam">TI-info</span><br> Mertens
<br> 109
</div>
</div>
<div class="middagpauze">
<div class="uur_container">
<div class="uur">
<div class="boven">12u00</div>
</div>
</div>
<div class="vak uur_1">amp;nbsp;</div>
<div class="vak uur_1">amp;nbsp;</div>
<div class="vak uur_1">amp;nbsp;</div>
<div class="vak uur_1">amp;nbsp;</div>
<div class="vak uur_1">amp;nbsp;</div>
</div>
<div class="rij_lessenrooster">
<div class="uur_container">
<div class="uur">
<div class="boven">13u00</div>
</div>
<div class="uur">
<div class="boven">13u50</div>
<div class="beneden">14u40</div>
</div>
</div>
<div class="vak uur_2 lichamelijke_opvoeding">
<span class="vaknaam">Lichamelijke opvoeding</span><br> Riské
<br> turnzaal 1
</div>
<div class="vak uur_2 wiskunde">
<span class="vaknaam">Wiskunde</span><br> Awadhpersad
<br> 207
</div>
<div class="vak uur_2">amp;nbsp;</div>
<div class="vak uur_2 infromatica">
<span class="vaknaam">TI-info</span><br> Mertens
<br> 109
</div>
<div class="vak uur_2">
<div class="uur_1 frans">
<span class="vaknaam">Frans</span><br> Heylen
<br> 207
</div>
<div class="uur_1 aardrijkskunde">
<span class="vaknaam">Aardrijkskunde</span><br> Engelen
<br> 207
</div>
</div>
</div>
<div class="rij_lessenrooster">
<div class="uur_container">
<div class="uur">
<div class="boven">14u55</div>
</div>
<div class="uur">
<div class="boven">15u45</div>
<div class="beneden">16u35</div>
</div>
</div>
<div class="vak uur_2 infromatica">
<span class="vaknaam">TI-info</span><br> Leys
<br> 109
</div>
<div class="vak uur_2 infromatica">
<span class="vaknaam">TI-info</span><br> Leys
<br> 109
</div>
<div class="vak uur_2">amp;nbsp;</div>
<div class="vak uur_2 engels">
<span class="vaknaam">Engels</span><br> Tack
<br> 207
</div>
<div class="vak uur_1 cv2">
<span class="vaknaam">CV2</span><br> Mertens
<br> 23
</div>
</div>
</div>
Ответ №1:
Установите justify-content: space-around;
on .rij_lessenrooster
и установите базовые divs на полную ширину и центрируйте текст.
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
.klasnaam {
text-align: center;
font-weight: bold;
}
.rij_lessenrooster {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.rij_lessenrooster div {
width: 100%;
text-align: center;
border-right: 1px solid;
}
.rij_weekdagen {
display: flex;
flex-direction: row;
justify-content: space-around;
border-bottom: 1px solid;
}
.boven {
display: flex;
flex-direction: column;
margin-bottom: 60px;
}
.weekdag {
width: 100%;
text-align: center;
border-right: 1px solid;
}
<div class="container">
<div class="klasnaam">5I</div>
<div class="rij_weekdagen">
<div class="weekdag">Maandag</div>
<div class="weekdag">Disndag</div>
<div class="weekdag">Woensdag</div>
<div class="weekdag">Donderdag</div>
<div class="weekdag">Vrijdag</div>
</div>
<div class="rij_lessenrooster">
<div class="uur_container">
<div class="uur">
<div class="boven">8u25</div>
</div>
<div class="uur">
<div class="boven">9u15</div>
<div class="beneden">10u05</div>
</div>
</div>
<div class="vak uur_2">
<div class="uur_1 nederlands">
<span class="vaknaam">Nederlands</span><br> Verheyen
<br> 207
</div>
<div class="uur_1 gescheidenis">
<span class="vaknaam">Geschiedenis</span><br> De Coster<br> 207
</div>
</div>
<div class="vak uur_2 frans">
<span class="vaknaam">Frans</span><br> Heylen
<br> 207
</div>
<div class="vak uur_2 wiskunde">
<span class="vaknaam">Wiskunde</span><br> Awadhpersad
<br> 204
</div>
<div class="vak uur_2 wiskunde">
<span class="vaknaam">Wiskunde</span><br> Awadhpersad
<br> 207
</div>
</div>
</div>