Skip to main content
修正
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

質問者さんの実現したいことは、以下のように行なえると思います。

このコードでは、 flex-wrap プロパティで flex アイテムの折り返しを許可したうえで、 .roomTeacher-item3 を除くすべての flex アイテムに flex: 1 を適用しています。.roomTeacher-item3 は、直後に後続の flex アイテムが存在してはならないため、残りの横幅を margin-right プロパティを用いて埋めています。

flex-wrap プロパティで flex アイテムの折り返しを許可したうえで、 .roomTeacher-item3 を除くすべての flex アイテムに flex: 1 を適用します。.roomTeacher-item3 は、直後に後続の flex アイテムが存在してはならないため、残りの横幅を margin-right プロパティを用いて埋めています。

質問者さんの実現したいことは、以下のように行なえると思います。

このコードでは、 flex-wrap プロパティで flex アイテムの折り返しを許可したうえで、 .roomTeacher-item3 を除くすべての flex アイテムに flex: 1 を適用しています。.roomTeacher-item3 は、直後に後続の flex アイテムが存在してはならないため、残りの横幅を margin-right プロパティを用いて埋めています。

ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

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&#047;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>