web-dev-qa-db-ja.com

CSSフレックス、最初の行に1つのアイテムを表示し、次の行に2つのアイテムを表示する方法

これは非常に単純な質問ですが、フレックスコンテナに3つのアイテムを取得して2行に表示することはできません。1行目は1行目、2行目は2行目です。これは、フレックスコンテナのCSSです。明らかに、3つの項目を1行で表示します:)

div.intro_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

flex-wrapがwrapに設定されている場合、3つのアイテムが列に表示されます。コンテナ項目を複数の行に表示するには、ラップ設定が必要だと思いました。私は最初のコンテナ項目に対してこのCSSを試しましたが、最初の行全体を占めるようにするつもりでしたが、うまくいきませんでした

div.intro_item_1 {
  flex-grow: 3;
}

「CSS-Tricks」の手順 に従いましたが、どのコマンドの組み合わせを使用するのか本当にわかりません。私はこれに困惑しているので、どんな助けでも大歓迎です。

cssflexbox
63
RoyS

次のようなことができます：

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>div {
  flex: 1 0 50%;
}

.flex>div:first-child {
  flex: 0 1 100%;
}
<div class="flex">
  <div>Hi</div>
  <div>Hello</div>
  <div>Hello 2</div>
</div>

ここにデモがあります： http://jsfiddle.net/73574emn/1/

このモデルは、1つの「行」がいっぱいになった後の行ラップに依存しています。最初のアイテムのflex-basisを100％に設定したため、最初の行が完全に埋められます。 flex-wrap: wrap;に関する特別な注意

107
Nico O

Nico Oの答えは正しいです。ただし、Internet Explorer 10から11およびFirefoxでは、これでは目的の結果が得られません。

IEの場合、変化することがわかりました

.flex > div
{
   flex: 1 0 50%;
}

に

.flex > div
{
   flex: 1 0 45%;
}

トリックをするようです。理由を聞かないでください。これ以上詳しく説明していませんが、IEが境界ボックスなどをレンダリングする方法に関係している可能性があります。

Firefoxの場合、追加することで解決しました

display: inline-block;

アイテムに。

8
Peter Waegemans