フレックスボックスは国境を越えていますか？

下の画像のようにCSSでフレックスボックスを作成しようとしているが、私は、この画像のように

を見てだ問題を抱えている、それがダウンしてここにすべてのもののdiv数3プッシュのように思えます私も.threeするだけでなく、それは動作しませんストレッチを整列自己のプロパティを使用し、それを設定しようとしたコード

#flexcontainer 
{ 
width: 500px; 
height: 210px; 
border: 3px solid black; 
display: flex; 
flex-wrap: wrap; 
padding: 5px; 

} 

.flexitem 
{ 
background: yellow; 
width : 150px; 
text-align: center; 
height: 100px; 
line-height: 100px; 
margin: 2px; 
} 

.two 
{ 
width : 200px; 
} 
.three 
{ 
width : 120px; 
height: 100%; 
}

です。ここでは、HTMLコード

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title> 
      Project Name 
     </title> 

    <link rel="stylesheet" type="text/css" href="main.css"> 
</head> 

<body> 
    <div id="flexcontainer"> 
    <div class="flexitem one">1</div> 
    <div class="flexitem two">2</div> 
    <div class="flexitem three">3</div> 
    <div class="flexitem four">4</div> 
    <div class="flexitem four">5</div> 
    </div> 
</body> 
</html>

出典

2016-05-02 Mohammad Istanboli

は実際にあなたがフレックス列をラップして、子供たちを並べ替えることができます：

#flexcontainer { 
 
    width: 500px; 
 
    height: 210px; 
 
    border: 3px solid black; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    padding: 5px; 
 
} 
 

 
.flexitem { 
 
    background: yellow; 
 
    width: 150px; 
 
    text-align: center; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    margin: 2px; 
 
} 
 

 
.two { 
 
    width: 200px; 
 
    order: 3; 
 
} 
 

 
.three { 
 
    width: 120px; 
 
    height: 100%; 
 
    order: 5; 
 
} 
 

 
.five { order: 4; }

<div id="flexcontainer"> 
 
    <div class="flexitem one">1</div> 
 
    <div class="flexitem two">2</div> 
 
    <div class="flexitem three">3</div> 
 
    <div class="flexitem four">4</div> 
 
    <div class="flexitem five">5</div> 
 
</div>

jsFiddle：https://jsfiddle.net/azizn/12xkrtp4/

出典

2016-05-02 17:37:23 Aziz

フレックスボックスは国境を越えていますか？

答えて

関連する問題