Flex Container
1
2
3
A Flexible Layout must have a parent element with the display
property set to flex.
Direct child element(s) of the flexible container automatically becomes
flexible items.
\\
플렉스 컨테이너 속성은 하기와 같습니다:\\
* ''flex-direction''
* ''flex-wrap''
* ''flex-flow''
* ''justify-content''
* ''align-items''
* ''align-content''
\\
======The flex-direction Property======
''flex-direction''속성은 컨테이너가 플렉스 아이템을 쌓을 방향을 정의합니다.\\
{{:wiki:css:css_note:flex-direction.png?400|}}
===== Example =====
''column''값은 수직으로(상단에서 하단으로) 플렉스 아이템을 배치합니다.\\
The flex-direction Property
The "flex-direction: column;" stacks the flex items
vertically (from top to bottom):
1
2
3
===== Example =====
''column-reverse''값은 수직 방향(하단에서 상단으로)으로 플렉스 아이템을 배치합니다.\\
{{:wiki:css:css_note:column-reverse.png?400|}}\\
The flex-direction Property
The "flex-direction: column-reverse;" stacks
the flex items vertically (but from bottom to top):
1
2
3
===== Example =====
''row''값은 수평(좌측에서 우측으로)으로 플렉스 아이템을 배치합니다.\\
{{:wiki:css:css_note:flex-row.png?400|}}\\
The flex-direction Property
The "flex-direction: row;" stacks the flex items horizontally
(from left to right):
1
2
3
===== Example =====
''row-reverse''값은 우측에서 좌측 가로 방향으로 플렉스 아이템을 배치합니다.\\
{{:wiki:css:css_note:flex-row-reverse.png?400|}}\\
The flex-direction Property
The "flex-direction: row-reverse;" stacks the flex items horizontally
(from right to top):
1
2
3
\\
======The flex-wrap Property======
''flex-wrap'' 속성은 플렉스 아이템의 wrap 여부를 지정합니다.\\
\\
하기의 예제에는 12개의 플렉스 아이템이 있고, ''flex-wrap''속성을 더 잘 확인할 수 있습니다.\\
{{:wiki:css:css_note:flex-wrap.png?400|}}\\
The flex-wrap Property
The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:
1
2
3
4
5
6
7
8
9
10
11
12
===== Example =====
''flex-wrap: nowrap'' 속성은 플렉스 아이템이 wrap되지 않도록 지정합니다.(기본값 입니다.)\\
{{:wiki:css:css_note:flex-wrap-no-wrap.png?400|}}\\
The flex-wrap Property
The "flex-wrap: nowrap;" specifies that the flex items will not wrap
(this is default):
1
2
3
4
5
6
7
8
9
10
11
12
===== Example =====
''flex-wrap: wrap-reverse'' 속성은 필요한 경우 역순으로 플렉스 아이템이 wrap되도록 지정합니다.\\
{{:wiki:css:css_note:flex-wrap-wrap-reverse.png?400|}}\\
The flex-wrap Property
The "flex-wrap: wrap-reverse;" specifies that the flex items will wrap
if necessary, in reverse order:
1
2
3
4
5
6
7
8
9
10
11
12
======The flex-flow Property======
''flex-flow''속성은 ''flex-direction''과''flex-wrap'' 속성 2가지 모두를 설정하기 위한 속기 속성입니다.\\
{{:wiki:css:css_note:flex-flow.png?400|}}\\
=====Example=====
The flex-flow Property
The flex-flow property is a shorthand property for the flex-direction
and the flex-wrap properties.
1
2
3
4
5
6
7
8
9
10
11
12
======The justify-content Property======
''justify-content''속성은 플렉스 아이템을 정렬하기 위해 사용합니다.\\
{{:wiki:css:css_note:justify-content.png?400|}}\\
=====Example=====
''center''값은 컨테이너의 중앙에 플렉스 아이템들을 정렬합니다.\\
Flex Direction Property
The justify-content Property
The "justify-content: center;" aligns the flex items
at the center of the container:
1
2
3
===== Example =====
''flex-start'' 속성은 컨테이너의 시작 부분에tj 플렉스 아이템을 정렬합니다 (기본 값입니다.)\\
{{:wiki:css:css_note:justify-content-flex-start.png?400|}}\\
The justify-content Property
The "justify-content: flex-start;" aligns the flex items
at the beginning of the container(this is default):
1
2
3
===== Example =====
''flex-end'' 속성은 컨테이너의 끝 부분에서 플렉스 아이템을 정렬합니다\\
{{:wiki:css:css_note:justify-content-flex-end.png?400|}}\\
The justify-content Property
The "justify-content: flex-end;" aligns the flex items
at the end of the container:
1
2
3
===== Example =====
''space-around''속성은 라인의 이전, 사이, 이후에 있는 공간에 플렉스 아이템을 표시합니다.\\
{{:wiki:css:css_note:justify-content-space-around.png?400|}}\\
The justify-content Property
The "justify-content: space-around;" displays the flex items
with space before, between and after the lines:
1
2
3
===== Example =====
''space-between'' 속성은 라인 사이의 공간에 플렉스 아이템을 표시합니다.\\
{{:wiki:css:css_note:justify-content-space-between.png?400|}}\\
The justify-content Property
The "justify-content: space-between;" displays the flex items
with space between the lines:
1
2
3
======The align-items Property======
''align-items'' 속성은 플렉스 아이템을 정렬시키는데에 사용합니다.\\
{{:wiki:css:css_note:align-items-center.png?400|}}\\
하기 예제들에서 %%200px%% 높이의 컨테이너를 사용하여 ''align-items'' 속성을 더 잘 확인할 수 있습니다.\\
===== Example =====
''center''값은 컨테이너의 중간에 플렉스 아이템을 정렬시킵니다.\\
The align-items Property
The "align-items: center;" aligns the flex items
in the middle of the container:
1
2
3
===== Example =====
''flex-start'' 값은 컨테이너의 상단에 플렉스 아이템들을 정렬합니다.\\
{{:wiki:css:css_note:align-items-flex-start.png?400|}}\\
Flex Direction Property
The align-items Property
The "align-items: flex-start;" aligns the flex items
at the top of the container:
1
2
3
===== Example =====
''flex-end'' 값은 컨테이너의 하단에 플렉스 아이템들을 정렬합니다.\\
The align-items Property
The "align-items: flex-end;" aligns the flex items
at the bottom of the container:
1
2
3
===== Example =====
''stretch'' 값은 컨테이너를 채우기 위해 플렉스 아이템들을 펼칩니다.(기본 값입니다):\\
{{:wiki:css:css_note:align-items-stretch.png?400|}}\\
The align-items Property
The "align-items: stretch;" stretches the flex items
to fill the container (this is default):
1
2
3
===== Example =====
''baseline'' 값은 기준선 정렬처럼 플렉스 아이템들을 정렬합니다.\\
{{:wiki:css:css_note:align-items-baseline.png?400|}}\\
The align-items Property
The "align-items: baseline;" aligns the flex items
such as their baselines aligns:
1
2
3
4
\\
\\
======The align-content Property======
''align-content'' 속성은 플렉스 라인들을 정렬하는데 사용됩니다.\\
{{:wiki:css:css_note:align-content-space-between.png?400|}}\\
\\
하기의 예제들에서 ''flex-wrap''속성이 ''wrap''으로 설정된 600px 높이의 컨테이너를 사용하여, ''align-content''속성을 더 잘 나타냅니다.\\
===== Example =====
''space-between''값은 플렉스 라인들 사이의 균일한 공간이 있는 플레스 라인들을 표시합니다.\\
{{:wiki:css:css_note:align-content-space--between1.png?400|}}
The align-content Property
The "align-content: space-between;" displays the flex lines
with equal space between them:
1
2
3
4
5
6
7
8
9
10
11
12
===== Example =====
''space-around''값은 플렉스 라인들 이전, 사이, 이후의 공간으로 플렉스 라인들을 표시합니다.\\
{{:wiki:css:css_note:align-content-space-around1.png?400|}}\\
The align-content Property
The "align-content: space-around;" displays the flex lines
with space before, between and after them:
1
2
3
4
5
6
7
8
9
10
11
12
===== Example =====
''stretch'' 값은 플렉스 라인들을 펼쳐서 남은 공간을 차지합니다.(기본 값)\\
{{:wiki:css:css_note:align-content-stretch.png?400|}}\\
The align-content Property
The "align-content: stretch;" stretches the flex lines
to take up the remaining space (this is default):
1
2
3
4
5
6
7
8
9
10
11
12
===== Example =====
''center''값은 컨테이너 중간에 플렉스 라인들을 표시합니다.\\
{{:wiki:css:css_note:align-content-center.png?400|}}\\
The align-content Property
The "align-content: center;" displays the flex lines
in the middle of the container:
1
2
3
4
5
6
7
8
9
10
11
12
===== Example =====
''flex-start''값은 컨테이너의 시작 부분에서 플렉스 라인들을 표시합니다.\\
{{:wiki:css:css_note:align-content-flex-start.png?400|}}\\
The align-content Property
The "align-content: flex-start;" displays the flex lines
at the start of the container.
1
2
3
4
5
6
7
8
9
10
11
12
===== Example =====
''flex-end''값은 컨테이너의 끝 부분에서 플렉스 라인들을 표시합니다.\\
{{:wiki:css:css_note:align-content-flex-end.png?400|}}\\
The align-content Property
The "align-content: flex-end;" displays the flex lines
at the end of the container.
1
2
3
4
5
6
7
8
9
10
11
12
=====Perfect Centering=====
하기의 예제들에서 아주 일반적인 스타일 문제인 완벽한 중앙 정렬 방안을 확인하겠습니다.\\
{{:wiki:css:css_note:perfect-centering.png?400|}}\\
\\
**SOLUTION:** 두 개의 ''justify-content''와 ''align-items'' 속성을 ''center''로 설정하면, 플렉스 아이템은 완벽히 중앙으로 정렬될 것입니다.\\
Perfect Centering
A container with both the justify-content and the align-items properties
set to center will align the item(s) in the center (in both axis).
======All CSS Flexbox Container Properties======
^ Property ^ Description ^
| align-center | flex-wrap 속성의 작용을 수정합니다. align-items와 유사하지만 플렉스 아이템을 정렬하는 대신 플레스 라인을 정렬합니다. |
| align-items | 아이템들이 교차축에서 이용할 수 있는 모든 공간을 사용하지 않는 경우 플렉스 아이템을 수직으로 정렬합니다. |
| display | %%HTML%% 요소에 사용된 박스 타입을 지정합니다. |
| flex-direction | 플렉스 컨테이너 내부의 플렉스 아이템의 방향을 지정합니다. |
| flex-flow | flex-direction과 flex-wrap에 대한 단축 속성 |
| flex-wrap | 하나의 플렉스 라인에서 플렉스 아이템들을 위한 충분한 공간이 없는 경우, 플렉스 아이템의 float 여부를 지정합니다. |
| justify-content | 플렉스 아이템들이 주축에서 이용가능한 모든 공간을 사용하지 않는 경우, 플렉스 아이템들을 수직으로 정렬합니다. |
{{tag>오션, CSS Flex Container}}