Flexbox로 Border 레이아웃 구현

5799 단어 flexboxCSS
2017년 4월에는 윈도 Vista 지원이 종료됨에 따라 IE 10 이하에 대한 대응이 필요하지 않습니다.이에 따라 여러 개의 새로운 CSS 기능을 실전에 투입할 수 있는 상황이 됐지만, 가장 큰 영향을 미치는 새로운 기능으로는 플렉스박스가 있다.
Flexbox를 사용하면 기존의 CSS에서 처리하기 어려운 상하 중앙 접근과 남은 높이에 적합한 상자를 간단하고 유연하게 실현할 수 있다.
이번에 소개한 것은 플렉스박스로 Border 레이아웃을 실현하는 방법입니다.Border 레이아웃은 구체적으로 동, 서, 남, 북, 중앙에서 구성 요소를 구성하는 레이아웃 메커니즘을 말합니다.Java AWT의 Border LayoutNET Windows Form의 Dock을 생각하면 쉽게 이해할 수 있을 것 같다1.
실제 화면 예2.

그럼 HTML을 구체적으로 살펴봅시다.
<!doctype html>
<style>
html, body {
    height: 100%;
    margin: 0;
}
.layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.layout-body {
    flex: 1 1 auto;
    overflow: hidden;

    display: flex;
    flex-direction: row;
}
.layout-center {
    flex: 1 1 auto;
    overflow: auto;
}
.layout-left,
.layout-right {
    overflow: auto;
}

/* 以下の CSS は色を付けているだけなので無視して構いません。 */
.layout-header { background-color: red; }
.layout-left { background-color: purple; }
.layout-right { background-color: green; }
.layout-footer { background-color: cyan; }
</style>
<body>
<div class="layout">
    <div class="layout-header">header</div>
    <div class="layout-body">
        <div class="layout-left">left</div>
        <div class="layout-center">content</div>
        <div class="layout-right">right</div>
    </div>
    <div class="layout-footer">footer</div>
</div>
</body>
flexbox의 규격을 알면 간단하게 실현할 수 있을 텐데, 실제로 해보면 중앙 부분의 스크롤이 의외로 번거롭다.여기서 오버플로우를 지정하면 안의 내용이 넘쳐도 사이즈가 바뀌지 않는 문제를 해결할 수 있습니다.
또한layout-center에layout을 넣어도 동작합니다.
이 글을 쓴 후에야 이런 포석이 성배 배치 문제로 유명한 문제라는 것을 알게 되었다.링크 주소에도 같은 해결 방법이 기재되어 있으니 참고하세요.  ↩
Windows의 IE11, Chrome, Firefox, Edge를 통해 작업이 확인되었습니다.  ↩
[검증] 브라우저에서 인쇄된 DPI는 몇 개입니까?
Vulkan[14] 정점 버퍼

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage