LAYOUT LAB / CANONICAL HTML + CSS

어떤 배치가 필요한지 고르기

Question-driven route from screen constraints to StyleGallery Layout patterns and recipes.

720px

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

실행한 HTML·CSS 코드
<div class="action_row">
    <button type="button">Save changes</button>
    <button type="button">Preview</button>
    <button type="button">Discard draft</button>
</div>

<style>
.action_row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--action-gap);
}

</style>
원문 가이드