Flexbox를 사용하여 고정 너비 측면 기둥이 있는 유연한 중앙 기둥을 어떻게 만들 수 있습니까?

Flexbox 레이아웃에서 유연한 중앙 열을 사용하여 고정 너비 열 구현

Flexbox 레이아웃에서는 열 너비와 유연성을 관리하는 것이 어려울 수 있습니다. 이 문서에서는 중앙 열을 조정하여 사용 가능한 공간을 채우는 동시에 고정 너비 왼쪽 및 오른쪽 열을 유지하는 일반적인 문제를 다룹니다.

고정 너비 Co가 포함된 Flexbox

고정 너비 열을 만들려면 너비 속성을 사용하지 마세요. 이렇게 하면 원치 않는 축소가 발생할 수 있습니다. 대신 flex-grow, flex-shrink 및 flex-basis에 대한 특정 값을 사용하여 flex 단축 구문을 활용하세요. 예:

.fixed-column {
  flex: 0 0 230px; /* Don't grow, don't shrink, start at 230px */
}

중앙 기둥 구부리기

중앙 기둥의 유연성 덕분에 창 크기에 따라 확장하거나 축소할 수 있습니다. flex 속성을 1(또는 0이 아닌 값)로 설정하면 고정 너비 열 뒤의 나머지 공간을 차지합니다.

.flex-column {
  flex: 1 1 0; /* Grow, don't shrink, start at 0px */
}

반응형 숨기기/표시

왼쪽 열의 너비나 가운데 열의 유연성에 영향을 주지 않고 오른쪽 열을 숨기려면 CSS 미디어 쿼리 또는 JavaScript를 사용하여 가시성을 전환하세요. 예:

@media screen and (max-width: 600px) {
  .right-column {
    display: none;
  }
}

전체 코드 예

위의 조정을 결합하면 전체 코드 조각은 다음과 같습니다.

.fixed-column {
  flex: 0 0 230px;
}

.flex-column {
  flex: 1 1 0;
}

@media screen and (max-width: 600px) {
  .right-column {
    display: none;
  }
}

By 이러한 기술을 구현하면 고정 너비 열과 다음에 적응하는 동적 중앙 열을 사용하여 유연한 Flexbox 레이아웃을 효과적으로 구현할 수 있습니다. 창 크기 및 사용자 상호 작용

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