2016-05-02 23 views
4

Hallo Ich habe versucht, unter enter image description hereFlex Box außerhalb der Grenzen?

aber ich habe ein Problem, eine Flex-Box in CSS wie das Bild zu machen, die hier wie dieses Bild aussehen ist alles wie der div Nummer 3 Push scheint enter image description here

it down der Code ist

#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%; 
} 

ich habe auch versucht align-Selbst Eigenschaft zu verwenden und setzen sie ihn auf .Drei zu strecken, aber es funktioniert auch nicht. Hier ist HTML-Code

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

Antwort

1

Eigentlich können Sie wickeln flex Spalten und dann neu ordnen die Kinder:

#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/

Verwandte Themen