Move flex item to far right of next row - html

Question

I have a flexbox container that has 4 elements: C1,C2,C3,C4.
Currently, it is displayed all in one line.
My goal is to make C4 to display under C3.
Can someone guide me how to accomplish my goal? Thanks in advance.
The following are my code: https://jsfiddle.net/vvqhejt3/3/
.flexbox {
display: flex;
border: 1px solid black;
width: 330px;
}
.content1 {
width: 100px;
margin-right: 10px;
background-color: blue;
height: 50px;
}
.content2 {
width: 100px;
margin-right: 10px;
background-color: yellow;
}
.content3 {
width: 100px;
margin-right: 10px;
background-color: red;
}
.content4 {
width: 100px;
background-color: green;
height: 10px;
}
<div class="flexbox">
<div class="content1">C1</div>
<div class="content2">C2</div>
<div class="content3">C3</div>
<div class="content4">C4</div>
</div>

Answer 1

When you create a flex container (display: flex or display: inline-flex), it comes with several default settings. Among them are:
flex-direction: row - flex items will align horizontally
justify-content: flex-start - flex items will stack at the start of the line
align-items: stretch - flex items will expand to cover the cross-size of the container
flex-wrap: nowrap - flex items are forced to stay in a single line
Note the last setting.
Your four divs are forced to remain in a single line.
You can override this setting with flex-wrap: wrap.
Then you can use an auto margin to space the item to the right.
.flexbox {
display: flex;
flex-wrap: wrap; /* NEW */
border: 1px solid black;
width: 330px;
}
.content1 {
width: 100px;
margin-right: 10px;
background-color: blue;
height: 50px;
}
.content2 {
width: 100px;
margin-right: 10px;
background-color: yellow;
}
.content3 {
width: 100px;
margin-right: 10px;
background-color: red;
}
.content4 {
width: 100px;
background-color: green;
height: 10px;
margin-left: auto; /* NEW */
margin-right: 10px; /* NEW */
}
<div class="flexbox">
<div class="content1"> C1 </div>
<div class="content2"> C2 </div>
<div class="content3"> C3 </div>
<div class="content4"> C4 </div>
</div>
References:
Methods for Aligning Flex Items along the Main Axis
5.2. Flex Line Wrapping: the flex-wrap property

Answer 2

Add flex-flow: row wrap; and justify-content: flex-end; to the container and margin-right: 10px; to div class .content4. Also be sure to correct the class in the last container. Currently it says conten4
Also, here is a link to a simple guide for flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
HTML
<div class="flexbox">
<div class="content1"> C1 </div>
<div class="content2"> C2 </div>
<div class="content3"> C3 </div>
<div class="content4"> C4 </div>
</div>
CSS
.flexbox {
display: flex;
border: 1px solid black;
width: 330px;
flex-flow: row wrap;
justify-content: flex-end;
}
.content1 {
width: 100px;
margin-right: 10px;
background-color: blue;
height: 50px;
}
.content2 {
width: 100px;
margin-right: 10px;
background-color: yellow;
}
.content3 {
width: 100px;
margin-right: 10px;
background-color: red;
}
.content4 {
width: 100px;
background-color: green;
height: 10px;
margin-right: 10px;
}