Flexbox Wrap이 작은 화면에서 마지막 요소를 중앙에 배치하는 것을 방지하는 방법은 무엇입니까?

Flexbox Wrap: 요소 배치 사용자 정의

Flexbox에서 요소의 래핑 동작을 제어하는 ​​것은 원하는 레이아웃을 얻는 데 매우 중요합니다. 화면이 좁아질 때 마지막 두 카드가 왼쪽으로 정렬되지 않고 중앙에 정렬되는 질문에 설명된 문제를 해결하기 위해 몇 가지 기술을 사용할 수 있습니다.

1. 고스트 요소:

한 가지 접근 방식은 마지막 줄의 빈 공간을 채우는 "고스트" 요소를 만드는 것입니다. 예를 들어 최대 4개의 열이 예상되는 경우 3개의 빈 div를 고스트 요소로 도입할 수 있습니다. 이렇게 하면 요소가 왼쪽부터 줄 바꿈되어 여러 줄에 동일하게 정렬됩니다.

2. 의사 요소:

또 다른 옵션은 의사 요소(:before 및 :after)를 활용하는 것입니다. 실제 요소 앞뒤에 빈 div를 추가하면 필요한 고스트 요소 수가 2개로 효과적으로 줄어듭니다. 이 방법은 마지막 줄의 시각적 방해도 방지합니다.

구현:

제공된 코드에서 CSS를 다음과 같이 수정하여 원하는 동작을 얻을 수 있습니다.

.card {
  /* Styles for the card elements */
}

.card:empty {
  width: 300px; /* Width of empty card */
  box-shadow: none; /* Remove box-shadow for empty cards */
  margin: 2rem; /* Keep empty cards aligned with actual cards */
  padding-bottom: 0; /* Remove padding for empty cards */
}

.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

HTML에 필요한 고스트를 추가합니다. 요소:

<div class="container">
  <div class="recipe-grid">
    <!-- Actual card elements -->
    <div class="card">
      <!-- Card content -->
    </div>
    <!-- ... more card elements -->
    
    <!-- Ghost elements -->
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

이 접근 방식을 사용하면 화면 너비에 필요할 때마다 새 줄에서 시작하여 카드가 왼쪽부터 줄바꿈됩니다. 고스트 요소는 마지막 줄의 남은 공간을 차지하여 여러 행에 걸쳐 카드를 균등하게 정렬합니다.

위 내용은 Flexbox Wrap이 작은 화면에서 마지막 요소를 중앙에 배치하는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!