Flexbox 배치 설계기

1. 컨테이너 설정

Flex 속성을 편집하세요.

2. 아이템 속성

grow/shrink는 0~8, basis는 0~600px, 최소 크기는 0~500px입니다. order는 시각적 순서만 바꿉니다.

3. 실제 배치와 크기

지정한 고정 너비의 Flexbox를 표시합니다. 작은 화면에서는 미리보기 영역을 가로 스크롤하세요.

아래 크기는 현재 브라우저가 렌더링한 실제 값입니다. CSS 속성값 자체와 다를 수 있습니다.

4. HTML과 CSS

출력 코드는 설정한 고정 크기 컨테이너를 사용합니다. 실제 사이트에서는 너비·높이·라벨과 읽기 순서를 검토하세요.

CSS

.your-flex {
  display: flex;
  width: 640px;
  height: 180px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

.your-flex > .item-f1 {
  flex: 1 1 140px;
  min-width: 100px;
  order: 0;
}

.your-flex > .item-f2 {
  flex: 2 1 220px;
  min-width: 160px;
  order: 0;
}

.your-flex > .item-f3 {
  flex: 1 1 140px;
  min-width: 100px;
  order: 0;
}

HTML

<div class="your-flex">
  <div class="item-f1">Navigation</div>
  <div class="item-f2">Content</div>
  <div class="item-f3">Aside</div>
</div>