尽管我的谷歌曲,我发现了一些关于如何实现多行Flexboxes的示例。我从例子中得到的代码都没有工作。我有三个元素在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%。我缺少某些供应商的前缀,还是我的语法错误?

有帮助吗?

解决方案

flex box spec有在过去几个月里更改了,您正在使用旧语法。我认为目前只在Chrome金丝雀和某种程度上实现了新的规格。(这是一点点越野车)盒子线已经消失了,以实现这种垂直布局有几种方式。使用-webkit-flex方向:列;所以

<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;

    }
.

在上面链接的规格页面上有一系列例子。

其他提示

使用flex-direction属性。

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

引用流程文章: http://fend-tricks.com/flexbox-intro/

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top