Have 2 elements share same line with flexbox

Question

If I am justifying a series of elements with flexbox is it possible to make 2 elements share a line?

For instance take this example:

.outer {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  width: 50px;
}
.outer .inner {
  width: 50px;
  height: 50px;
  background-color: blue;
  margin-bottom: 20px;
  font-size: 24px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
  <div class="inner">5</div>
  <div class="inner">6</div>
  <div class="inner">7</div>
</div>

The elements are in straight column. Is it possible to select certain elements to share a row like this:

Answer 1

You can try this.

What I did is set .outer to flex-flow:row wrap; and set its width.

and then set the margin of .outer .inner:nth-child(3),.outer .inner:nth-child(4)

By making the child 3 and 4 to have set its margin and width that will still not exceeds to width of the .outer so that they will still be inline to each other and the other child will occupy the whole row because their margin and width is equal to the width of the .outer

.outer {
  display: flex;
  flex-flow: row wrap;
  margin-left: auto;
  margin-right: auto;
  width: 120px;
  justify-content: center;
  align-items: center;
}
.outer .inner {
  width: 50px;
  height: 50px;
  margin-left: 35px;
  margin-right: 35px;
  margin-bottom: 20px;
  background-color: blue;
  font-size: 24px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer .inner:nth-child(3),
.outer .inner:nth-child(4){
  margin-left: 5px;
  margin-right: 5px;
}

<div class="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
  <div class="inner">5</div>
  <div class="inner">6</div>
  <div class="inner">7</div>
</div>

Answer 2

You may try something like this:

.outer {
  display: flex;
  margin:auto;
  flex-wrap:wrap;
  width: 50px;
}
.outer .inner {
  width: 50px;
  height: 50px;
  background-color: blue;
  margin-bottom: 20px;
  font-size: 24px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.outer .inner:nth-child(3),.outer .inner:nth-child(4) {
  width:25px;
  position:relative;
}
.outer .inner:nth-child(3):before,.outer .inner:nth-child(4):before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-12px;
  right:-12px;
  background:blue;
  z-index:-1;
}

.outer .inner:nth-child(3) {
  transform:translateX(-20px)
}
.outer .inner:nth-child(4) {
  transform:translateX(20px)
}

<div class="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
  <div class="inner">5</div>
  <div class="inner">6</div>
  <div class="inner">7</div>
</div>