Flexbox를 사용하여 유연한 센터가 있는 고정 너비 열을 어떻게 만들 수 있나요?

유연한 중심을 갖춘 고정 너비 열을 목표로 할 때 문제는 창 크기가 변경될 때 고정 너비 열이 축소되는 것을 방지하는 것입니다. Flexbox에서 크기 조정이 적용되는 너비 속성에 의존하는 대신 선호되는 접근 방식은 flex-grow, flex-shrink 및 flex-basis의 조합을 사용하는 것입니다.

예를 들어 다음을 고려하세요. 코드:

이 코드에서 flex 속성은 세 가지로 구성됩니다. 값:

flex-grow: 0(즉, 늘어나지 않음)

.column.left {
    flex: 0 0 230px;
}

.column.right {
    flex: 0 0 230px;
}

flex-shrink: 0(즉, 줄어들지 않음)

flex -기본: 230px(즉, 시작 위치 230px)

• 이렇게 하면 왼쪽과 오른쪽 열 모두 항상 230px의 고정 너비를 유지하는 것이 효과적으로 보장됩니다.
• 또한 justify-content 및 align-items 속성에 주목할 가치가 있습니다. 기본값이 원하는 동작과 일치하므로 이 시나리오에서는 생략할 수 있습니다.
• 올바른 시나리오를 처리하려면 열을 숨겨야 하는 경우 flex 속성은 가시성에 영향을 주지 않으므로 동일하게 유지됩니다. 대신 다음과 같은 JavaScript 또는 CSS 기술을 사용하여 가시성을 전환할 수 있습니다.

결론적으로 flex-grow, flex-shrink 및 flex-basis를 사용하면 고정된 flexbox 레이아웃을 생성할 수 있습니다. 사용 가능한 공간에 맞춰 유연한 중심을 유지하면서 열 너비를 조정합니다.

위 내용은 Flexbox를 사용하여 유연한 센터가 있는 고정 너비 열을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!