CSS 플렉스 아이템
하위 요소(항목)
플렉스 컨테이너의 직접 자식 요소는 자동으로 유연한(플렉스) 항목이 됩니다.
1
2
삼
4
위의 요소는 회색 플렉스 컨테이너 안에 있는 4개의 파란색 플렉스 항목을 나타냅니다.
예시
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
플렉스 항목 속성은 다음과 같습니다.
주문 속성
order속성은 플렉스 항목의 순서를 지정합니다 .
1
2
삼
4
코드의 첫 번째 플렉스 항목이 레이아웃의 첫 번째 항목으로 나타날 필요는 없습니다.
주문 값은 숫자여야 하며 기본값은 0입니다.
예시
order 속성은 플렉스 항목 의 순서를 변경할 수 있습니다.
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
flex-grow 속성
flex-grow속성은 나머지 플렉스 항목에 비해 플렉스 항목이 얼마나 커질지 지정합니다 .
1
2
삼
값은 숫자여야 하며 기본값은 0입니다.
예시
세 번째 플렉스 항목을 다른 플렉스 항목보다 8배 빠르게 성장시킵니다.
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
flex-shrink 속성
flex-shrink속성은 나머지 플렉스 항목에 비해 플렉스 항목이 축소되는 정도를 지정합니다 .
1
2
삼
4
5
6
7
8
9
10
값은 숫자여야 하며 기본값은 1입니다.
예시
세 번째 플렉스 항목이 다른 플렉스 항목만큼 줄어들지 않도록 합니다.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
플렉스 기반 속성
flex-basis속성은 플렉스 항목의 초기 길이를 지정합니다 .
1
2
삼
4
예시
세 번째 플렉스 항목의 초기 길이를 200픽셀로 설정합니다.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
플렉스 속성
flex속성은 , 및 속성의
flex-grow약식 flex-shrink속성 입니다 flex-basis.
예시
세 번째 플렉스 항목을 확장 불가능(0), 축소 불가능(0) 및 200픽셀의 초기 길이로 만듭니다.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
align-self 속성
속성 은 align-self유연한 컨테이너 내부에서 선택한 항목의 정렬을 지정합니다.
이 align-self 속성은 컨테이너 속성에서 설정한 기본 정렬을 재정의합니다 align-items.
1
2
삼
4
이 예에서는
align-self속성을 더 잘 보여주기 위해 200픽셀 높이의 컨테이너를 사용합니다.
예시
컨테이너 중앙에 세 번째 플렉스 항목을 정렬합니다.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
예시
컨테이너 상단에 두 번째 플렉스 항목을 정렬하고 컨테이너 하단에 세 번째 플렉스 항목을 정렬합니다.
<div class="flex-container">
<div>1</div>
<div style="align-self:
flex-start">2</div>
<div style="align-self:
flex-end">3</div>
<div>4</div>
</div>
CSS Flexbox 항목 속성
다음 표에는 모든 CSS Flexbox 항목 속성이 나열되어 있습니다.
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |