Flexbox的錯誤與.flex視頻

目前我想實現什麼，我認爲將是一個簡單的任務：Flexbox的錯誤與.flex視頻

柔性排有兩個自動調整大小（flex: 0 0 auto;）子元素被垂直居中和水平。
孩子們本身是彎曲的列。
在其中一個子元素中，我想要一個流暢的YouTube視頻。

這是我最初的代碼，我懷疑會工作：

好吧，簡單。這很好，我很高興。現在，我建我的.flex-video類：

/* 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我們的孩子彎曲的一列，佈局休息。看起來，包含.flex-video的父級flex列無法計算其維度。

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

來源

2016-04-26 tatemz

這是你在追求什麼？ http://codepen.io/anon/pen/rLNedq?editors=1100

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

我只是改變了你的Flex基礎是50%而不是auto，我已經感動了max-width聲明上升了一個層次。

雖然，當你說「自動調整大小」時，目前還不清楚你指的是多大。你是否希望它的大小從width和height屬性開始，然後調整以適應容器？如果是這樣，那麼將flex增長/收縮屬性設置爲0是行不通的。

如果您澄清了您希望達到的目標，那麼某人回答您的問題會更容易。

來源

2016-05-27 22:14:15

Flexbox的錯誤與.flex視頻

回答

相關問題