CSS의 Flex 레이아웃을 사용하여 요소가 존재하는지 여부에 따라 동적 레이아웃 조정을 달성하는 방법은 무엇입니까?

CSS Flex 레이아웃 : 요소가 존재하는지 여부에 따라 페이지를 동적으로 조정합니다.

웹 페이지 레이아웃은 종종 요소가 표시되는지 여부에 따라 동적으로 조정해야합니다. 이 기사는 CSS의 Flex 레이아웃을 사용 하여이 기능을 달성하는 방법을 보여 주므로 페이지가 다양한 요소 조합에서 좋은 디스플레이 효과를 유지할 수 있습니다.

우리의 목표는 다음 상황을 충족시키는 레이아웃을 만드는 것입니다.

1. "카드 열기 및 파일 설정" 은 왼쪽에 있으며 "외래 환자 재충전"및 "지불"은 오른쪽에 세로로 배열됩니다.
2. "카드 개방 및 파일 설정"이 누락되었습니다. "외래 환자 재충전"및 "지불"은 오른쪽에 세로로 배열됩니다.
3. "외래 환자 재충전"이 누락되었습니다. "카드를 열고 파일 설정"이 왼쪽에 있고 "지불"이 오른쪽에 있습니다.
4. "지불"이 없음 : "카드 열기 및 파일 설정"은 왼쪽에 있으며 "외래 환자 재충전"이 오른쪽에 있습니다.
5. "오픈 카드 및 파일 설정"만 남아 있습니다. "오픈 카드 및 파일 설정"만 표시됩니다.

CSS의 Flex 레이아웃을 영리하게 적용하면 위의 효과를 쉽게 달성 할 수 있습니다. 다음 코드는 구현 방법을 보여줍니다.

<div class="container">
  <div class="item left">카드를 열고 파일을 작성하십시오</div>
  <div class="item right">
    <div class="item sub-item">외래 환자 재충전</div>
    <div class="item sub-item">수수료를 지불하십시오</div>
  </div>
</div>

.Container {
  디스플레이 : Flex;
}

.item {
  /* 기본 스타일, 필요에 따라 조정할 수 있습니다*/
  패딩 : 10px;
  국경 : 1px Solid #CCC;
}

.왼쪽 {
  플렉스 : 1; /* 여유 공간을 차지*/
}

.오른쪽 {
  플렉스 : 1; /* 여유 공간을 차지*/
  디스플레이 : Flex;
  플렉스 방향 : 열; /* 자식 요소는 세로로 배열됩니다*/
  높이 : 80px; /* 올바른 높이를 보장*/
}

.sub-item {
  플렉스 : 1; /* 하위 요소의 높이*/
}

/* 숨겨진 요소의 스타일*/
.hidden {
  디스플레이 : 없음;
}

JavaScript를 통한 클래스의 추가 및 제거를 제어하면 요소가 동적으로 숨겨 레이아웃을 변경할 수 있습니다. 예를 들어, "외래 환자 재충전"요소가 존재하지 않으면 hidden 클래스를 추가 할 수 있습니다. 플렉스 레이아웃은 나머지 요소의 위치와 크기를 자동으로 조정합니다. 이해하고 유지 관리하기 쉬운 간단하고 효율적인 동적 레이아웃 솔루션입니다.

위 내용은 CSS의 Flex 레이아웃을 사용하여 요소가 존재하는지 여부에 따라 동적 레이아웃 조정을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!