:フレキシボックスのバグ私は現在、私は単純な作業だろうと思ったものを達成しようとしています
- 上下中央されている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