고정 너비 측면 열과 유연한 중앙 열이 있는 3열 Flexbox 레이아웃을 어떻게 만들 수 있나요?

Flexible Center를 사용하여 고정 너비 열 유지

왼쪽 및 오른쪽 열이 유지되는 세 개의 열이 있는 Flexbox 레이아웃을 디자인하려고 합니다. 너비는 고정되어 있고 가운데 기둥은 나머지 공간을 차지하도록 확장됩니다. 열의 크기를 설정했음에도 불구하고 창 크기가 조정되면 바람직하지 않게 줄어듭니다.

해결 방법

원하는 레이아웃을 얻으려면 width 속성을 다음 flex 사양으로 바꾸세요. 고정 너비 열의 경우:

flex: 0 0 230px;

이 사양 의미:

• flex-grow의 경우 0: 열을 확장하지 않습니다.
• flex-shrink의 경우 0: 열을 압축하지 않습니다.
• flex의 경우 230px -기본: 초기 너비를 230px로 설정합니다.

본질적으로 이 구성은 창 크기에 관계없이 열이 230px로 유지되도록 합니다.

추가 기능

사용자 상호 작용에 따라 올바른 열을 숨기면서 왼쪽 열의 너비를 고정하고 이에 따라 가운데 열을 확장하면 다음을 통합할 수 있습니다.

.column.center {
  flex: 1 0 calc(100% - 230px);
}

이 수정을 통해 오른쪽 열은 숨겨져 있고 가운데 열은 남은 공간을 채우고 왼쪽 열은 230px로 고정되어 있습니다.

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