중앙 기둥을 유연하게 유지하면서 고정 너비 측면 기둥을 어떻게 유지할 수 있습니까?

유연한 중앙 컬럼으로 고정 너비 컬럼 보장

유연한 웹 레이아웃을 추구하려면 두 개의 고정 너비 컬럼을 갖는 것이 바람직한 경우가 많습니다. 너비를 동적으로 조정하는 중앙 열이 있는 너비 열. 그러나 사용자는 일반적으로 브라우저 창이 축소됨에 따라 고정 열이 축소되는 문제에 직면합니다.

이 문제를 해결하려면 고정 열에 너비 속성을 지정하지 않는 것이 중요합니다. 대신 flexbox의 특수 속성을 사용하여 열의 동작을 제어하세요.

선호되는 접근 방식은 flex: 0 0 230px; 왼쪽 및 오른쪽 열 모두에 대해. 이는 브라우저가 이러한 열에 대해 230px의 고정 너비를 유지하도록 지시하여 창 크기에 관계없이 일정하게 유지되도록 합니다.

flex: 0 0 230px; 세 부분으로 분해됩니다.

• 0은 성장 없음(flex-grow)을 나타냅니다.
• 0은 축소 없음(flex-shrink)을 나타냅니다.
• 230px는 초기 및 고정을 지정합니다. width (flex-basis)

추가로 숨김도 가능합니다 Flexbox의 CSS 순서 속성을 사용하여 반응적으로 올바른 열을 만듭니다. 이를 통해 숨겨진 오른쪽 기둥에 의해 생성된 빈 공간을 중앙 기둥이 채워 유연한 동작을 유지할 수 있습니다.

위 내용은 중앙 기둥을 유연하게 유지하면서 고정 너비 측면 기둥을 어떻게 유지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!