불완전한 줄을 중심으로 Flexbox 항목을 방지하는 방법은 무엇입니까?

Flexbox 항목이 끊어진 줄의 중앙에 위치하는 것을 방지하는 방법은 무엇입니까?

Flexbox에서 크기가 맞지 않는 항목이 들어 있는 유연한 컨테이너가 있는 경우 너비 내에서 한 줄에 균등하게 배치되면 해당 줄의 나머지 항목이 중앙에 배치됩니다. 하지만 나머지 항목이 완전한 줄의 항목처럼 왼쪽에서 시작하여 동일한 간격을 갖도록 하려면 어떻게 해야 할까요?

해결책: "고스트" 요소 사용

JavaScript를 사용하지 않고도 불완전한 줄의 남은 공간을 채우는 빈 요소("고스트" 요소라고도 함)를 만들 수 있습니다.

예를 들어 컨테이너의 잠재적 열 길이가 4인 경우 3이 필요합니다. 유령 요소. HTML 끝에 다음을 추가할 수 있습니다.

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

업데이트된 CSS:

.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}

이렇게 하면 고스트 요소가 HTML 요소와 동일한 공간을 차지하게 됩니다. 실제 카드.

의사 요소 사용

또한 CSS 의사 요소를 활용하여 필요한 고스트 요소 수를 줄일 수도 있습니다.

.card:empty::before {
    content: "";
    width: 300px;
    box-shadow: none;
    margin: 2rem;
}

이것은 불완전한 라인에서 그 자리를 차지하는 각 빈 카드에 대해 의사 요소를 생성합니다. 2개의 고스트 요소를 2개의 의사 요소로 바꾸면 열 길이 4에 대해 1개의 실제 고스트 요소만 필요합니다.

예제 코드:

<div class="container">
  <div class="recipe-grid">

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card"></div> <!--- Ghost element -->

  </div>
</div>

사용 고스트 요소 또는 의사 요소를 사용하면 Flexbox 항목이 불완전한 줄 중앙에 배치되는 것을 방지하고 시각적으로 더욱 보기 좋게 배열할 수 있습니다.

위 내용은 불완전한 줄을 중심으로 Flexbox 항목을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!