Столбцы и строки Flexbox

Я пытаюсь использовать flexbox на моем сайте с ограниченным успехом.Столбцы и строки Flexbox

Я могу создать прекрасный 3-х столбцовый макет, но я хочу, чтобы третий столбец обернулся под вторым столбцом при определенном разрешении экрана. Возможно ли использование flexbox, или мне нужно вернуться к более традиционным методам?

Мой код: http://jsfiddle.net/eFeC3/, который показывает, как выглядит мой код в настоящее время, а также реализация flexbox.

<style> 
body > * > *{background:#666;color:#eee;padding:40px;margin:20px;text-align:center;} 
/* Flex */ 
article{display:-webkit-flex} 
section{-webkit-flex:1;-webkit-order:2} 
nav{-webkit-order:1} 
aside{-webkit-order:3} 

/* Nasty */ 
#b, #c {overflow:hidden} 
#a{float:left;margin:0px 40px 80px 20px} 
</style> 
<body> 
    <article> 
     <section>1</section> 
     <aside>2</aside> 
     <nav>3</nav> 
    </article> 

<div id="demo"> 
    <div id="a">3</div> 
    <div id="b">1</div> 
    <div id="c">2</div> 
</div>

источник

2013-04-16 Toby

Не могли бы вы быть более ясными относительно того, как вы хотите, чтобы ваши элементы выкладывались? То, как вы изменили свои элементы (3 1 2), обертывание элементов приведет к тому, что 2 окажется под 3. Вам нужно будет использовать медиа-запрос здесь, чтобы исправить порядок. http://codepen.io/cimmanon/pen/Axutc – cimmanon

Заказ уже изменен свойством -webkit-order. Идея заключается в том, что на 800 пикселей у вас есть 3 столбца, 600 пикселей у вас есть два (первый - второй, а второй - второй), а затем у вас есть один столбец размером 400 пикселей (элементы сложены друг над другом). Этот вид происходит с демонстрацией, которую вы показали (которая использует более старую версию flexbox), но зависит от ширины, а не от принуждения css – Toby

. Моя демонстрация не использует более старую версию Flexbox, она предоставляет все необходимые для максимального доступа свойства поддержка браузера. – cimmanon

Элементы Flex не обертываются по умолчанию. Когда вы используете упаковку, она лучше всего работает, если вы также укажете flex-basis, чтобы сказать . Это идеальная ширина для этого элемента.

http://codepen.io/cimmanon/pen/Axutc

article { 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 

section { 
    -webkit-flex: 1 20em; 
    -ms-flex: 1 20em; 
    flex: 1 20em; 
    -webkit-flex-order: 1; 
    -ms-flex-order: 1; 
    -webkit-order: 1; 
    order: 1; 
} 

nav { 
    -webkit-flex: 1 10em; 
    -ms-flex: 1 10em; 
    flex: 1 10em; 
    /* by default, flex elements have an order of 0 */ 
} 

aside { 
    -webkit-flex: 1 10em; 
    -ms-flex: 1 10em; 
    flex: 1 10em; 
    -webkit-flex-order: 2; 
    -ms-flex-order: 2; 
    -webkit-order: 2; 
    order: 2; 
}

Если нужны элементы должны быть заказана в определенной точке разрыва, то единственным вариантом является использование медиа запросов. Вы также можете использовать медиа-запросы, чтобы изменить flex-basis на процент, если вы недовольны тем, где он сам собирается обернуть (например, flex: 1 20%).

источник

2013-04-16 14:09:01 cimmanon

Это не работает для Firefox: все три контейнера попадают в одну строку. – nickiaconis

Команда Mozilla намеренно выпустила свою стандартную реализацию Flexbox в неполном состоянии (она была скрыта за настройкой конфигурации, когда этот ответ был написан). Обертка не поддерживается, и вам нужно будет использовать запрос функции, чтобы скрыть «display: flex» от Firefox. – cimmanon

Столбцы и строки Flexbox

ответ

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