📐

CSS Flexbox 생성기

시각적으로 Flexbox 레이아웃을 설계하고 CSS 코드를 생성하세요

📦Flex Container 속성

flex-direction

justify-content

align-items

flex-wrap

gap

align-content

🧩Flex Items (3개)

Item 1

flex-grow

flex-shrink

flex-basis

order

align-self

Item 2

flex-grow

flex-shrink

flex-basis

order

align-self

Item 3

flex-grow

flex-shrink

flex-basis

order

align-self

👁️미리보기

Item 1

Item 2

Item 3

💻CSS 코드

/* Flex Container */
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  flex-wrap: nowrap;
}

🏷️HTML 코드

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>