Отзывчивый CSS с Flex Box

Я работаю над страницей, использующей FlexBox для ее функциональности. Но так как добавление табуляции, моя страница, похоже, хочет сбросить каждую сторону (профиль) и (tabber) на новую строку, а не масштабировать размер <div>. На данный момент он настроен на первый медиа-запрос около 1000px. Но это слишком много, чтобы поменять местами на один столбец и хотелось бы немного сжать их перед тем, как перейти к новым строкам.Отзывчивый CSS с Flex Box

Вот контейнер, левая сторона-ДИВ (профиль), а правая-ДИВ (Tabber) CSS 's:

.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

Когда я уменьшаю масштаб, ширина и поплавок, похоже, переносятся хорошо, как в, они не пересекаются в Inspect Element. –

Если вы использовали flex, начните с основного контейнера, чтобы сделать его проще: например https://jsfiddle.net/8we805dg/1/ –

master-bio-containerdiv содержит обоих детей, которых вы хотите быть столбчатыми. Ребенок < -> родительские отношения с прямыми гибкими детьми неявны.

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

https://jsfiddle.net/nf13qx42/

источник

2016-06-08 17:42:18

Отзывчивый CSS с Flex Box

ответ

Смежные вопросы