使用Flex Box的響應式CSS

我正在使用FlexBox的頁面使用它的標籤功能。但自從添加了tabber之後，我的頁面似乎想要將每一側（配置文件）和（tabber）放到一個新的行上，而不是縮放<div>的大小。截至目前，它已成爲圍繞1000px進行的首次媒體查詢。但是這太大了，無法將它換成單個列布局，並希望在縮小到新行之前縮小它們。使用Flex Box的響應式CSS

這裏是集裝箱，左側-DIV（配置文件），以及右側-DIV（焊接設備）的CSS：

.bio-pages .master-bio-container{ 
    max-width: 1090px; 
    display: block; 
    margin: 0 auto; 
} 

.professor__profile{ 
background: #FFF; 
    display: Block; 
    border-radius: 6px; 
    float: left; 
    max-width: 22rem; 
    width: 100%; 
    padding: 48px 15px; 
    border-bottom: #BBB 3px solid 
} 

.tabs__body { 
    background-color: white; 
    padding: 20px; 
    min-height: 260px; 
     max-height: 410px; 
    overflow: auto; 
    word-wrap: break-word; 
    border-bottom-left-radius:6px; 
     border-bottom-right-radius:6px; 
} 

.professor__tabs { 
background-color: white; 
    max-width: 44rem; 
    display: block; 
    width: 100%; 
    float: right; 
     margin: 0 0 45px; 
     border-radius:6px; 
     border-bottom: #BBB 3px solid 
} 


@media (min-width: 40rem) { 
    .professor__tabs { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
     -ms-flex-flow: row wrap; 
      flex-flow: row wrap; 
    } 
}

Here is my fiddle, please ignore the server side language

上可能會造成什麼任何想法這個？ FlexBox的工作原理是什麼？感謝您的幫助！

來源

2016-06-08 knocked loose

您需要重置'width'和'float'（也許更多的屬性，如保證金等），以及在媒體查詢，否則會搞亂一切 – LGSon

當我縮小比例時，寬度和浮動看起來很好，因爲它們不會在檢查元素中被劃掉。 –

如果你使用flex，從主容器開始使它更容易：示例https://jsfiddle.net/8we805dg/1/ –

master-bio-containerdiv包含您希望成爲柱狀的兩個孩子。小孩< - >直接彎曲孩子的父母關係是隱含的。

.master-bio-container { 
    display: flex; 
}

https://jsfiddle.net/nf13qx42/

來源

2016-06-08 17:42:18

使用Flex Box的響應式CSS

回答

相關問題