33

尽管我在谷歌上搜索，但我发现很少有关于如何实现多行 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%。我是否缺少某些供应商前缀或者我的语法错误？

4

2 回答 2

30

弹性盒规范在过去几个月发生了变化，您使用的是旧语法。我认为新规范目前仅在 Chrome Canary 中实现，并且在某种程度上在最新的 chrome 中实现。（这有点错误）box-lines multiple 已经消失了，所以要实现这种垂直布局有几种方法。使用 -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;

    }

上面链接的规范页面上有一大堆示例。

于 2012-10-02T20:27:58.603 回答
1

使用flex-direction属性。

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

参考以下文章： http: //fend-tricks.com/flexbox-intro/

于 2017-08-30T11:27:36.070 回答