Reputation: 1947
I have a container and inside there are 3 boxes: yellow, green and red.
I gave display:flex
to the container and gave justify-content:flex-start
for the items to start at beginning.
I wanted to move the red box to the end so I gave margin-right: auto
to the yellow box so that the red box could move to end (not sure if this is the exact way to move the red box to end, if not i want help in that too).
So the question is: I want the green box in the vertical middle of the container and I want to move it to the extreme right like the red box (but should be in the middle of container)
How do I do it with flex box?
.container {
height: 500px;
width: 500px;
background-color: royalblue;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.yellowbox {
color: black;
height: 100px;
width: 100px;
background-color: yellow;
margin-right: auto;
}
.greenbox {
color: black;
height: 100px;
width: 100px;
background-color: green;
align-self: center;
margin-left: auto;
}
.redbox {
color: black;
height: 100px;
width: 100px;
background-color: red;
}
<div class="container">
<div class="yellowbox">
<p>the white text</p>
</div>
<div class="greenbox">
<p>the black text</p>
</div>
<div class="redbox">
<p>the red text</p>
</div>
</div>
THIS IS MY CODEPEN LINK: http://codepen.io/ShamZ/pen/pRLELP
Upvotes: 2
Views: 112
Reputation: 106048
you may increase some of the margin
s but you must allow the flex
children to wrap
. and use order
to put the green box in last position
.container {
height: 500px;
width: 500px;
background-image:linear-gradient(to left,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%),linear-gradient(to top,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.1) 50%);
background-color: royalblue;
display: flex;
flex-direction: row;
flex-wrap:wrap;
justify-content:space-between;
}
.yellowbox {
color: black;
height: 100px;
width: 100px;
background-color: yellow;
margin-right: 50%;
}
.greenbox {
order:1;
color: black;
height: 100px;
width: 100px;
background-color: green;
margin: -100px 0 auto auto;
}
.redbox {
margin:0 0 0 auto;
color: black;
height: 100px;
width: 100px;
background-color: red;
}
<div class="container">
<div class="yellowbox">
<p>the white text</p>
</div>
<div class="greenbox">
<p>the black text</p>
</div>
<div class="redbox">
<p>the red text</p>
</div>
</div>
http://codepen.io/gc-nomade/pen/Qdmpbb
Upvotes: 1