如何实现多线Flexbox？

Question

尽管我使用谷歌搜索,我发现很少有关如何实现多线柔性盒的例子.我从示例中得到的代码都没有用.我在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%.我错过了某些供应商前缀或我的语法错了吗？

Answer 1

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;

    }

上面链接的规范页面上有很多例子.