0

CSSでフレキシブルボックスを使ってこのような配置にしたいのですがどうすれば上手く配置できますか?
見にくくてすみません😓

<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>
0

1 件の回答 1

2

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

このコードでは、 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>

2
  • これって数値弄ったらレイアウトそのままで全体の大きさって変えられますか?もし変えられるならどこを変えたら変わるかも教えていただきたいです🥺
    – user34642
    Commented 2019年6月9日 9:22
  • @user34642 さん > .room-contentsflex プロパティや、 .room-contents>div:not(.roomTeacher-item3), .roomTeacher-item3min-width, height プロパティを変更することで、各アイテムの大きさを変更することが出来ます。flex コンテナの親要素の width, height プロパティを設定することで flex コンテナ全体の大きさを変更することも可能です。
    – supa
    Commented 2019年6月9日 9:32

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。