

CSSでフレキシブルボックスを使ってこのような配置にしたいのですがどうすれば上手く配置できますか？  
見にくくてすみません  
![](https://i.stack.imgur.com/UOUsZ.jpg)

[code]

    <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>
    
[/code]


CC BY-SA 4.0
2019-06-09T07:46:24.020
55644
2019-06-09T09:00:55.947
2019-06-09T08:16:09.037
32986
34642
question
html css html5
HTML&CSS flexbox


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

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

ここで、 `margin-right` プロパティに 100% を設定し、 `min-width` プロパティで最小幅を設定していますが、 `margin-
right` プロパティの値を `calc` 関数で計算するようにするのであれば、 `min-width` プロパティを使用する必要はありません。

[code]

    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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2019-06-09T08:33:01.277
55645
2019-06-09T09:00:55.947
2019-06-09T09:00:55.947
32986
32986
55644
answer