5

私の質問は、ブラウザー ウィンドウの幅に応じて複数の行にラップ (flex-wrap:wrap;) する Flex-Box のスタイリングに関するものです。JavaScript 以外に、特定の行をデザインする方法はありますか?

次のdivがあります

 <body>
 <div class="flexwrap">
     <div class=flexbox"></div>
     <div class=flexbox"></div>
     <div class=flexbox"></div>
 </div>
 </body>

そして、次のスタイルシート

.flexwrap {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    display: -moz-box;
    -moz-box-orient: horizontal;
    display: flex;
    box-orient: horizontal;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    flex-wrap: wrap;
}

.flexbox {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    flex-grow:1;
    flex-shrink:0;
    width:300px;
    height:100px;
}

ブラウザー ウィンドウの幅が 900px を超える場合、クラス .flexbox を持つすべての div は、互いに隣り合う 1 つの水平線になります。ブラウザー ウィンドウの幅が 900px 未満の場合、.flexbox クラスの div は、ブラウザーの幅に応じて 2 行または 3 行になります。

2 行目にあるすべての div のスタイルを設定したい。つまり、次のことを意味します。

Browser width > 900px = no div is styled
Browser width < 900px and Browser width > 600px  = the third div is styed
Browser width < 600px  = the second div is styled

cssを使用してそれを達成する方法はありますか?

前もって感謝します

4

1 に答える 1

2

いいえ。Flexbox には、複数行のフレックス コンテナー内の特定の行をスタイルする方法はありません。

Flexboxでは、flex-basis 値に基づいてフレックス アイテムのサイズを変更できます。

http://codepen.io/cimmanon/pen/GKEfD

.flexwrap {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) {
  .flexwrap {
    display: flex;
  }
}

.flexbox {
  -webkit-flex: 1 20em;
  -ms-flex: 1 20em;
  flex: 1 20em;
  height: 100px;
}

これは 2009 Flexbox 実装では機能しないことに注意してください。

  • ラッピングが指定されていますが、それを実装しているブラウザーはありません
  • フレックスベースはありません

関連: CSS3 フレックスボックスは、垂直方向に配置された要素の高さを調整します

于 2013-10-29T19:00:58.333 に答える