使用Flexbox构建网格 - 仅在右侧第二行中的项目

Question

我想用Flexbox构建我的网格并且稍微停留一下。 它是一个4列网格。在第二行我只想在右侧放置2个项目。 只需看看我的Scribble。

Answer 1

.flex {
  display: flex; /* Magic begins */
  flex-wrap: wrap; /* Multiline */
  justify-content: flex-end; /* Align to the right */
}
.flex > div {
  width: 25%;
}

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>