2016-04-26 11 views
0

フレキシボックスのバグ私は現在、私は単純な作業だろうと思ったものを達成しようとしています

  • 上下中央されている2つの自動的にサイズflex: 0 0 auto;)の子要素を持つフレックス行と水平に
  • 子供自身がフレックスコラムです。
  • 子要素の1つの中で、私は流動的なYouTube動画を持ちたいと思っています。

    http://codepen.io/tatemz/pen/dMqKbb

    さて、シンプル:

は、ここで私は仕事と疑わ私の最初のコードです。それはうまく動作し、私は幸せです。今、私は私の.flex-videoクラスを構築する:私たちは一緒にすべてを入れて、巣当社.flex-videoたちの子供フレックス列の1、内部のレイアウト区切りを

/* Taken from http://foundation.zurb.com/sites */ 
.flex-video { 
    position: relative; 
    height: 0; 
    padding-bottom: 75%; 
    margin-bottom: 1rem; 
    overflow: hidden; 
} 

    .flex-video iframe, 
    .flex-video object, 
    .flex-video embed, 
    .flex-video video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    } 

    .flex-video.widescreen { 
    padding-bottom: 56.25%; 
    } 

    .flex-video.vimeo { 
    padding-top: 0; 
    } 

、。 .flex-videoを含む親フレックス列は寸法を計算できないようです。

http://codepen.io/tatemz/pen/qZMKdz

答えて

0

これはあなたの後ですか? http://codepen.io/anon/pen/rLNedq?editors=1100

.child { 
    flex: 0 0 50%; 
    max-width: 200px; 
} 

私はちょうど50%の代わりautoであるためにあなたのフレックスの基礎を変更した、と私はレベルをmax-width宣言を上に移動しました。

「自動サイズ設定」と言っても、あなたがどのサイズのサイズを参照しているかはわかりません。 widthheight属性のサイズから開始し、コンテナに合わせて調整しますか?もしそうなら、flexのgrow/shrinkプロパティを0に設定することはうまくいきません。

あなたが達成しようとしていることを明確にすれば、誰かがあなたの質問に答えるのが簡単になります。

関連する問題