1

MAJ : コードペンの追加 : http://codepen.io/anon/pen/srGwq

非常に特定のプロジェクトでフレックスボックスを扱い始めました。ドキュメントは何度も頻繁に変更されたため、私は自分の問題に対処していません。

ここに私のhtmlがあります:

<div class="flexbox">
    <div class="middle">Middle</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

そして私のcss（可能性のための接頭辞なし）：

.flexbox {
  display: box;
  box-orient: horizontal;
  box-align: start;
}

.middle {
  box-flex-group: 1;
  box-flex: 2;
  box-ordinal-group: 2;
}

.left {
  box-flex-group: 1;
  box-flex: 1;
  box-ordinal-group: 1;
}

.right {
  box-flex-group: 1;
  box-flex: 1;
  box-ordinal-group: 3;
}

したがって、結果は次のとおりです。

________________________
| .left .middle .right |
|______________________|

メディア クエリでは、box-ordinal-group と box-orient を変更して、モバイルでこの結果を取得します。

____________
| .middle  | 
| .left    |
| .right   |
|__________|

問題は、次のように、.left と .right をタブレットの左の 1 列に垂直に配置する必要があることです。

____________________
| .left   .middle  | 
| .right           |
|__________________|

.left と .right を box-ordinal-group:1 に設定し、.middle を box-ordinal-group:2 に設定しようとしましたが、その結果、.left と .right が左側に水平に配置され、それらを垂直に並べます。

Flexboxのことはよくわからないので、経験者大歓迎です。多分それは不可能です。

ありがとう、悪いスキーマで申し訳ありませんが、まだ画像を投稿する機会がありませんでした.

4

2 に答える 2

0

ラップレイアウトのgithubbredeleにいくつかの例を示します。flex-flow（行/列の折り返し）とflex-basis（初期の最小幅）で遊んで、必要なものを取得する必要があります。

行ラップフローの場合：

.flexbox {
    display: -webkit-flex;
    display:flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.left, .right {
    -webkit-flex: 1 50%;
    flex: 1 50%;
}

.middle {
    width:50%;
}

カラムラップフローの場合：

.flexbox {
    /* the height has to be defined */
    height:400px;
    display: -webkit-flex;
    display:flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
}

.left, .right {
    -webkit-flex: 1 50%;
    flex: 1 50%;
}

.middle {
    -webkit-flex: 1 100%;
    flex:1 100%;
}

2番目の解決策はあなたが探しているものだと思います。

オリヴィエ:)

于 2013-02-12T14:30:20.973 に答える
0

see the flex-flow property:

http://dev.w3.org/csswg/css3-flexbox/#flex-flow-property

pseudo code like this:

@media $QUERY_TABLET { .flexbox {flex-flow: row wrap} }

于 2013-02-11T20:29:13.997 に答える