LAYOUT LAB / CANONICAL HTML + CSS

wrap-row

Wrap controls into rows with stable gaps.

720px

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

실행한 HTML·CSS 코드
<form class="wrap_row" aria-label="Filter tickets">
    <label>Status <select></select></label>
    <label>Owner <select></select></label>
    <button>Apply filters</button>
</form>

<style>
.wrap_row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

</style>
원문 가이드