시작

flexbox에서 중앙에 가까운 상황에서 사용하고 싶습니다justify-content: center. 이걸 사용하면 아래부분도 아래와 같이 중앙에 배열됩니다.

아래와 같이 전체적으로 중앙으로 맞추고 아래 부분은 왼쪽부터 배열하는 방법을 소개하고 싶습니다.

방법

방법은 매우 간단하다. 포장된 flexbox의 넓이를 프로젝트가 들어가는 극한의 넓이로 만들어 중앙에 가깝게 한다.
예를 들어 항목 너비가 120px이면 4열이 480px로 표시됩니다.이때 포장기의 폭을 480pxmargin: 0 auto로 설정하고 포장기를 가운데에 놓으면 왼쪽부터 배열하고 전체적으로 중앙으로 접근한다.
5열을 표시하려면 600px가 필요하기 때문에 600px부터 포장기의 폭은 600px면 됩니다.
4열, 5열 지정

.flex-center {
  display: flex;
  margin: 0 auto;  // ブロック全体を中央寄せになるように設定
  flex-wrap: wrap;

  // 4カラム表示のためのサイズ設定
  @media only screen and (min-width: 480px) {
    max-width: 480px;
  }

  // 5カラム表示のためのサイズ設定
  @media only screen and (min-width: 600px) {
    max-width: 600px;
  }
}

그림으로 표현하면 이런 느낌이에요.

여기까지 쓰면 왠지 알 것 같아서 나중에 표시하고 싶은 열만 쓰면 돼요.CSS로 쓰면 힘들지만 SCSS는mixin과 순환을 사용하기 때문에 간단합니다.
이런 상황에서 중도 열수는 극한에 이르지만 대부분의 사이트는max-width를 설치하여 한데 모으기 때문에 문제가 없다고 생각합니다.
mixin을 사용하여 각 열의 너비 설정을 지정합니다

// カラムが収まる幅になるように段階的に調整する
// $column-width: 1カラムの幅
// $max-column: 最大カラム数
@mixin flex-fitting($column-width, $max-column) {
  @for $i from 1 through $max-column {
    @media only screen and (min-width: $i * $item-width) {
      max-width: $i * $item-width;
    }
  }
}

.flex-center {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;

  @include flex-fitting(120px, 10);
}

끝날 때

중앙에서 접근하면서 내용을 왼쪽으로 접근하는 방법은 생각하기 어렵지만 SCSS를 사용하면 비교적 간단하게 설치할 수 있다.다른 사람들도 많이 고려했고 JS와 시뮬레이션 요소를 사용하여 빈 요소를 넣는 방법도 있다(참고 사이트에 링크를 붙였다).
이번 컨텐트의 샘플 코드는 CodePen으로 작성되었으며 설치에 대한 자세한 내용은 여기를 참조하십시오.
See the Pen flex centering by wintyo ( @wintyo )
on CodePen .

웹 페이지 정보

• Flexbox에서 마지막 행 가운데 정렬
• Flexbox에서 마지막 행을 왼쪽으로 정렬