Move flex item to far right of next row

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>

score 3 · Accepted Answer · edited May 23 '17 at 10:33

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:

GoMega54 · Answer 2 · 2016-06-15T02:28:35.407

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

Move flex item to far right of next row

2 Answers2