flex-wrap
プロパティで flex アイテムの折り返しを許可したうえで、 .roomTeacher-item3
を除くすべての flex アイテムに flex: 1
を適用します。.roomTeacher-item3
は、直後に後続の flex アイテムが存在してはならないため、残りの横幅を margin-right
プロパティを用いて埋めています。
ここで、 margin-right
プロパティに 100% を設定し、 min-width
プロパティで最小幅を設定していますが、 margin-right
プロパティの値を calc
関数で計算するようにするのであれば、 min-width
プロパティを使用する必要はありません。
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.contents {
display: flex;
flex-direction: column;
height: 100vh;
}
.room-contents {
display: flex;
flex: 1;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.room-contents>div:not(.roomTeacher-item3) {
height: 40%;
flex: 1;
}
.roomTeacher-item3 {
min-width: 50%;
height: 20%;
margin-right: 100%;
}
.roomNumber-item1 {
background: #ffa;
}
.capacity-item2 {
background: #faf;
}
.roomTeacher-item3 {
background: #faa;
}
.facility-item4 {
background: #aff;
}
.classSymbol-item5 {
background: #afa;
}
<article class="main">
<div class="contents">
<h1>〇階</h1>
<div class="room-contents">
<div class="roomNumber-item1">
<p>171</p>
</div>
<div class="capacity-item2">
<ul>
<li>30/60</li>
</ul>
</div>
<div class="roomTeacher-item3">
<ul>
<li>名前</li>
</ul>
</div>
<div class="facility-item4">
<ul>
<li>〇</li>
<li>〇</li>
<li>〇</li>
</ul>
</div>
<div class="classSymbol-item5">
<ul>
<li>クラス</li>
<li>クラス</li>
<li>クラス</li>
</ul>
</div>
</div>
</div>
</article>