it-swarm.com.ru

Как мне реализовать многострочный flexbox?

Несмотря на мой поиск в Google, я нашел несколько примеров того, как реализовать многострочные flexbox. Ни один из кодов, которые я получил из примеров, не работал. У меня есть три элемента внутри flexbox, и я хочу, чтобы первый был сверху, а второй и третий - в нижнем ряду.

<div class="flexbox">
  <div id="element1">element 1</div>
  <div id="element2">element 2</div>
  <div id="element3">element 3</div>
</div>

Я пытался использовать эти свойства:

.flexbox {
  width: 300px;
  display: box;
  display: -webkit-box;
  display: -moz-box;
  box-lines: multiple;
  flex-wrap: wrap;
}

#element1 {
  width: 100%;
}

и давая ему заданную ширину, но она все равно не будет переноситься, даже если первый элемент имеет ширину 100%. Я пропускаю определенные префиксы поставщика или мой синтаксис неверен?

30
zakdances

Спецификация flex box изменилась за последние несколько месяцев, и вы используете старый синтаксис. Я полагаю, что новая спецификация в настоящее время реализована только в Chrome Canary и в некоторой степени в последней версии Chrome. (Это немного глючит). Множество ящиков-строк пропало, поэтому для достижения этой вертикальной компоновки есть несколько способов. Использование -webkit-flex-direction: column; так 

<div id="flexbox">
    <div class="box">DIV 1</div>
    <div class="box">DIV 2</div>
    <div class="box">DIV 3</div>
</div>

и CSS:

#flexbox {
    display: -webkit-flex;
    -webkit-flex-direction: column;
    width: 500px;
    height: auto;
    min-height: 200px;
}

#flexbox .box {
    -webkit-flex: 1;

}

Использование упаковки:

-webkit-flex-wrap: wrap; 

и установить ваше направление: 

-webkit-flex-direction: row;

Так 

<div id="flexbox">
    <div class="box">DIV 1</div>
    <div class="box">DIV 2</div>
    <div class="box">DIV 3</div>
    <div class="box">DIV 4</div>
    <div class="box bigger">DIV 5</div>
    <div class="box">DIV 6</div>
</div>

#flexbox {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    width: 500px;
    height: auto;
    min-height: 200px;
    }

#flexbox .box {

    -webkit-flex: 130px 1;

    }

#flexbox .box.bigger {

    -webkit-flex: 330px 1;

    }

На странице спецификаций есть ссылка на множество примеров. 

23
Rob

Используйте атрибут flex-direction.

.container { flex-direction: row | row-reverse | column | column-reverse; }

см. текущую статью: http://fend-tricks.com/flexbox-intro/

0
Jayampathy Wijesena