LAYOUT LAB / CANONICAL HTML + CSS

본문 옆에 보조 영역 두기

Let a narrow sidebar and wider content wrap when space is tight.

영역 너비 720px

원문 CSS의 공간 배치를 실행합니다. 색·테두리는 영역 구분용이며, 비어 있던 미디어와 설정 슬롯에는 예시 콘텐츠를 채웠습니다.

실행한 HTML·CSS 코드

<section class="sidebar" aria-labelledby="sidebar-title">
    <article class="sidebar_primary">
        <h2 id="sidebar-title">Quarterly planning notes</h2>
        <p>The main article keeps priority when the available inline space changes.</p>
    </article>
    <aside class="sidebar_secondary">Meeting agenda and owners</aside>
</section>

<style>
.sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.sidebar_primary {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 16rem;
}

.sidebar_secondary {
    flex-basis: 18rem;
    flex-grow: 1;
}

</style>

원문 가이드