使用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的工作原理是什么？感谢您的帮助！

您需要重置'width'和'float'（也许更多的属性，如保证金等），以及在媒体查询，否则会搞乱一切 – LGSon

当我缩小比例时，宽度和浮动看起来很好，因为它们不会在检查元素中被划掉。 –

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

答

master-bio-containerdiv包含您希望成为柱状的两个孩子。小孩< - >直接弯曲孩子的父母关系是隐含的。

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

https://jsfiddle.net/nf13qx42/

使用Flex Box的响应式CSS

相关推荐