带有 Flex Box 的响应式 CSS答案

【问题标题】：Responsive CSS with Flex Box带有 Flex Box 的响应式 CSS
【发布时间】：2016-06-09 01:42:18
【问题描述】：

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

这里是容器、left-side-div（profile）和right-side-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 的工作原理吗？感谢您的帮助！

【问题讨论】：

您必须在媒体查询中重置width 和float（可能还有更多属性，例如边距等），否则会搞砸一切
当我缩小时，宽度和浮动似乎很好，因为它们在检查元素中没有被划掉。
如果你使用 flex，从主容器开始，这样会更容易：例如 jsfiddle.net/8we805dg/1
进行了一些修复，但这绝对帮助我走上正轨，非常感谢@GCyrillus！

标签： html css responsive-design flexbox

【解决方案1】：

master-bio-container div 包含您希望成为柱状的两个孩子。与直接 flex 子级的子父级关系是隐式的。

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

https://jsfiddle.net/nf13qx42/

【讨论】：