Question

我正在开发一个利用FlexBox进行tabber功能的页面。但是自从添加了tabber后，我的页面似乎想要将每一面（profile）和（tabber）放到一个新行上，而不是缩放<div>的大小。截至目前，它已设置为1000px周围的第一个媒体查询。但这太大了，无法将其换成单列布局，并希望在放入新行之前缩小它们。

这是容器，左侧div（配置文件）和右侧div（tabber）的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的工作原理吗？谢谢你的帮助！

Answer 1

master-bio-container div包含您希望为柱状的两个孩子。孩子＆lt; - ＆gt;与直接弹性儿童的父母关系是隐含的。

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

https://jsfiddle.net/nf13qx42/

Flex Box的响应式CSS

1 个答案: