Flex 항목을 원래 크기에 비례하여 확장하려면 어떻게 해야 합니까?

Flex 항목을 원래 크기에 비례하여 확장

HTML과 CSS에서는 유연하고 동적인 레이아웃을 쉽게 만들기 위해 Flexbox를 사용하는 것이 일반적입니다. 그러나 특정 시나리오에서는 플렉스 항목이 원래 크기에 비례하여 확장되어 컨테이너의 전체 너비가 변경되더라도 상대 너비를 유지하기를 원할 수 있습니다.

일반적인 Flexbox 설정에서는 flex를 사용할 수 있습니다. 1 초기 크기에 관계없이 모든 항목을 균등하게 확장합니다. 그러나 이 접근 방식을 사용하면 모든 항목의 너비가 동일해집니다. 이를 극복하기 위해 flex-basis 속성을 활용할 수 있습니다.

Flex-Basis 및 Flex-grow

flex-basis는 flex 항목의 초기 너비를 정의합니다. 기본적으로 auto 값을 사용합니다. 즉, 항목 콘텐츠의 크기에 맞게 조정됩니다. flex-grow와 결합하면 컨테이너의 초과 공간이 플렉스 항목 간에 분배되는 방식을 제어할 수 있습니다.

flex-basis: auto, flex-grow는 초과 공간만 배포합니다. 항목의 내용이 차지하는 공간입니다. 이렇게 하면 항목이 원래 크기에 비례하여 확장됩니다.

예: 버튼 너비 조정

폭이 다양한 버튼 행을 생각해 보세요. 다음 CSS를 사용하면 모든 버튼이 상대적인 크기를 유지하면서 사용 가능한 공간을 채우기 위해 확장됩니다.

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: auto;
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

또는 다음 약칭 표기법을 사용할 수 있습니다.

.button {
  flex: 1 1 auto;
}

결론

flex-basis와 flex-grow 사이의 상호 작용을 이해함으로써 flex 항목이 해당 항목에 비례하여 확장되도록 할 수 있습니다. 개별 너비를 존중하면서 원래 크기를 유지합니다. 이 접근 방식은 동적 레이아웃과 반응형 디자인에 더 큰 유연성을 제공합니다.

위 내용은 Flex 항목을 원래 크기에 비례하여 확장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!