고정 너비 외부 열이 있는 3열 Flexbox 레이아웃을 만드는 방법은 무엇입니까?

고정 너비 외부 열이 있는 3열 Flexbox 레이아웃

고정 너비 외부 열과 유연한 중앙 열이 있는 3열 Flexbox 레이아웃을 설정하려고 합니다. 열. 이러한 열의 크기를 정의했음에도 불구하고 뷰포트가 좁아지면 축소되는 것처럼 보입니다.

해결책

이 레이아웃의 핵심은 너비 대신 flex를 활용하는 것입니다. width를 CSS의 flex 속성으로 바꾸세요.

#container {
  display: flex;
}

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

flex 속성의 각 값이 의미하는 바는 다음과 같습니다.

• flex-grow의 경우 0: 열이 커지는 것을 방지합니다. 초기 너비를 초과합니다.
• flex-shrink의 경우 0: 열이 초기 너비 아래로 축소되는 것을 방지합니다. width.
• flex-basis의 경우 230px: 열의 초기 너비를 230px로 설정합니다.

이러한 속성을 설정하여 유지되는 외부 열의 고정 크기를 정의합니다. 뷰포트가 변경되더라도 일정합니다.

추가 참고

오른쪽 열의 경우 .column.right의 표시 속성을 없음으로 설정하면 됩니다.

.column.right {
  display: none;
}

이렇게 하면 왼쪽 열의 고정 너비와 가운데 열의 유연한 너비가 유지되면서 오른쪽 열이 숨겨집니다.

위 내용은 고정 너비 외부 열이 있는 3열 Flexbox 레이아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!