如何实现多行flexbox？ [英] How do I implement a multi-line flexbox?

问题描述

尽管我的Googling，我发现了几个例子，如何实现多行flexboxes。我从例子中得到的代码都没有工作。我在一个flexbox中有三个元素，我想要第一个在顶部，第二个和第三个在底部一行。

 < div class =flexbox> 
< div id =element1>元素1< / div> 
< div id =element2>元素2< / div> 
< div id =element3>元素3< / div> 
< / div> 
 

我尝试过使用这些属性：

< pre class =lang-css prettyprint-override> .flexbox {
width：300px;
display：box;
display：-webkit-box;
display：-moz-box;
box-lines：multiple;
flex-wrap：wrap;
}

＃element1 {
width：100％;
}


并赋予它一个设置宽度，但它仍然不会换行，即使第一元件具有100％的宽度。

解决方案

弹出框规格有更改，并且您使用的是旧语法。我相信的新规格目前只实现在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; 
 
} 
  

上面链接的spec页面有很多例子。

Despite my Googling, I've found few examples on how to implement multiple line flexboxes. None of the code I've gotten from examples has worked. I have three elements inside a flexbox and I want the first to be on top and the second and third to be on the bottom row.

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

I've tried using these properties:

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

#element1 {
  width: 100%;
}

and giving it a set width but it still won't wrap, even if the first element has a width of 100%. Am I missing certain vendor prefixes or is my syntax wrong?

解决方案

The flex box spec has changed in the last few months and you are using the old syntax. The new spec I believe is only currently implemented only in Chrome Canary and to some extent in latest chrome. (It's a little buggy) box-lines multiple is gone so to achieve this vertical layout there are a few ways. Using -webkit-flex-direction:column; so

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

and css :

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

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

}

Using wrapping:

-webkit-flex-wrap: wrap; 

and setting your direction to:

-webkit-flex-direction: row;

So

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

    }

There's a whole bunch of examples on the spec page linked above.

这篇关于如何实现多行flexbox？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！