flexレイアウトの例

by interlife

HTML

<ul class="flex-container">
  <li>パネル 1</li>
  <li>パネル 2</li>
  <li>パネル 3</li>
  <li>パネル 4</li>
  <li>パネル 5</li>
  <li>パネル 6</li>
  <li>パネル 7</li>
</ul>

SCSS

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  /* 最終行を左寄せにするための調整 */
  &:before, &:after {
    display: block;
    width: 23.5%; /* 4列の場合の1つ分の幅に合わせる */
    content: "";
  }
  &:before {
    order: 1;
  }
}

li {
  margin-bottom: 40px;
  width: 23.5%;
  height: 150px;
  background-color: #e0e0e0;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}