web-dev-qa-db-ja.com

複数行のフレックスボックスを実装するにはどうすればよいですか？

Googlingにもかかわらず、複数行のフレックスボックスを実装する方法の例はほとんど見つかりませんでした。例から得たコードはどれも機能していません。 flexboxの中に3つの要素があり、最初の行を一番上に、2番目と3番目を一番下の行に配置します。

<div class="flexbox">
  <div id="element1">element 1</div>
  <div id="element2">element 2</div>
  <div id="element3">element 3</div>
</div>

これらのプロパティを使用してみました：

.flexbox {
  width: 300px;
  display: box;
  display: -webkit-box;
  display: -moz-box;
  box-lines: multiple;
  flex-wrap: wrap;
}

#element1 {
  width: 100%;
}

幅を設定しますが、最初の要素の幅が100％であっても折り返されません。特定のベンダープレフィックスが欠落しているか、構文が間違っていますか？

htmlcsscss3layoutflexbox
30
zakdances

フレックスボックスの仕様には、過去数か月で 変更 があり、古い構文を使用しています。私が信じる新しい仕様は、現在のところChrome Canaryおよび最新のchromeである程度実装されています。（少しバグがあります）。 -webkit-flex-direction：column;を使用して

<div id="flexbox">
    <div class="box">DIV 1</div>
    <div class="box">DIV 2</div>
    <div class="box">DIV 3</div>
</div>

およびcss：

#flexbox {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    width: 500px;
    height: auto;
    min-height: 200px;
}

#flexbox .box {
    -webkit-flex: 1;

}

ラッピングの使用：

-webkit-flex-wrap: wrap;

方向を次のように設定します。

-webkit-flex-direction: row;

そう

<div id="flexbox">
    <div class="box">DIV 1</div>
    <div class="box">DIV 2</div>
    <div class="box">DIV 3</div>
    <div class="box">DIV 4</div>
    <div class="box bigger">DIV 5</div>
    <div class="box">DIV 6</div>
</div>

#flexbox {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    width: 500px;
    height: auto;
    min-height: 200px;
    }

#flexbox .box {

    -webkit-flex: 130px 1;

    }

#flexbox .box.bigger {

    -webkit-flex: 330px 1;

    }

上にリンクされている仕様ページには、たくさんの例があります。

24
Rob

使用 flex-direction属性。

.container { flex-direction: row | row-reverse | column | column-reverse; }

流れる記事を参照してください： http://fend-tricks.com/flexbox-intro/

1
Jayampathy Wijesena