6

一連のアイテムを含む単一の順序付きリストで構成されるレイアウトがあります。

すべてのアイテムは一貫した幅と高さを持っています - 最初のアイテムを除いて - (3x) 幅が (3x) 高さが (2x) 高いです。次のようになります。

ここに画像の説明を入力

ol {
  padding:0;
  margin:0;
  min-width: 488px;
}
li {
  list-style: none;
  width: 150px;
  padding-bottom: 16.66%;
  border: 5px solid tomato;
  display: inline-block;
}
li:first-child {
  float:left;
  width: 478px;
  border-color: green;
  padding-bottom: 34.25%;
  margin: 0 4px 4px 0;
}
<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Codepen デモ(ビューポートのサイズを変更して効果を確認)

現在、レイアウトを実現するためにフロートとインラインブロックを使用していますが、フレックスボックスが提供するいくつかの追加機能のためにフレックスボックスを使用したいと思います。

私はいくつかの試みをしましたが、成功しませんでした -

試み #1 - Codepen

ol {
  /* ... */
  display: flex;
  flex-wrap: wrap;
}

試み #2 - Codepen

リストの前にフロートを使用して、最初の大きなリスト項目のスペースを確保します

次に、最初のリスト項目に絶対表示を設定します。

どちらの試行でも、最初の行の赤いボックスが伸びて、最初のアイテムの高さを埋めます。

これは可能ですか？

(そうでない場合は、CSS グリッドの回避策に興味があります)

4

1 に答える 1