====== CSS Flexbox - Flex Items ====== * description : CSS Lists, * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-16 \\ \\ =====The source of this article==== [[https://www.w3schools.com/css/css3_flexbox_items.asp|CSS Flexbox - Flex Items]]\\ \\ ===== Child Elements (Items) ===== flex container의 직계 자식 요소들은 자동으로 flexible (flex) items가 됩니다.\\ \\ {{:wiki:css:css_note:direct-child-elements.png|}}\\ \\ 위의 요소는 그레이 컬러의 flex container 내부에 4개의 블루 컬러의 flex items를 나타냅니다.\\

Flexible Items

1
2
3
4

All direct children of a flexible container becomes flexible items.

 \\ flex item 속성들은 하기와 같습니다. * ''%%order%%'' * ''%%flex-grow%%'' * ''%%flex-shrink%%'' * ''%%flex-basis%%'' * ''%%flex%%'' * ''%%align-self%%'' ===== The order Property ===== ''%%order%%'' 속성은 flex items의 순서를 지정합니다.\\ \\ {{:wiki:css:css_note:flex-item-order-property.png|}}\\ \\ 코드 상의 첫 번째 flex item은 레이아웃에서 첫 번째 아이템으로 나타날 필요는 없습니다.\\ order값은 숫자이어야 하고, 기본 값은 0 입니다.\\ ==== Example ==== /order/ 속성은 flex items의 순서를 변경할 수 있습니다.

The order Property

Use the order property to sort the flex items as you like:

1
2
3
4
 ===== The flex-grow Property ===== ''%%flex-grow%%'' 속성은 어떤 하나의 flex item이 나머지 flex items에 비례하여 얼마나 많이 확장될 수 있는 지를 지정합니다.\\ \\ {{:wiki:css:css_note:flex-grow-property.png|}}\\ \\ 값은 숫자이어야 하며, 기본 값은 0입니다.\\

The flex-grow Property

Make the third flex item grow eight times faster than the other flex items:

1
2
3
 ===== The flex-shrink Property ===== ''%%flex-shrink%%'' 속성은 어떤 하나의 flex item이 나머지 flex item에 비례하여 얼마나 많이 축소될 수 있는 지를 지정합니다.\\ \\ {{:wiki:css:css_note:flex-shrink-property.png|}}\\ \\ 값은 숫자이어야 하며, 기본 값은 1 입니다.\\ ==== Example ==== 세 번째 flex item이 나머지 다른 flex items만큼 축소되지 않게 하는 예제입니다\\

The flex-shrink Property

Do not let the third flex item shrink as much as the other flex items:

1
2
3
4
5
6
7
8
9
10
 ===== The flex-basis Property ===== ''%%flex-basis%%'' 속성은 어떤 하나의 flex item에 대한 초기 길이 값을 지정합니다.\\ \\ {{:wiki:css:css_note:flex-basis-property.png|}}\\ ==== Example ==== 세 번째 flex item의 초기 길이 값을 200px로 설정합니다.\\

The flex-basis Property

Set the initial length of the third flex item to 200 pixels:

1
2
3
4
 ===== The flex Property ===== ''%%flex%%'' 속성은 ''%%flex-grow%%'', ''%%flex-shrink%%'', 그리고 ''%%flex-basis%%'' 속성들에 대한 약칭 속성입니다.\\ \\ ==== Example ==== 하기 예제는 세 번째 flex item이 확장되지도, 축소되지도 않게 만들고, 초기 길이 값 200pixel을 가지게 합니다.\\

The flex Property

Make the third flex item not growable (0), not shrinkable (0), and with an initial length 0f 200 pixels:

1
2
3
4
 ===== The align-self Property ===== ''%%align-self%%'' 속성은 플렉서블 컨테이너 내부에서 선택한 플렉스 아이템에 대한 정렬 방식을 지정합니다.\\ \\ ''%%align-self%%'' 속성은 플렉서블 컨테이너의 ''%%align-items%%'' 속성에 의해 설정된 기본 정렬 방식보다도 더 우선시됩니다.\\ \\ {{:wiki:css:css_note:align-self-property.png|}}\\ \\ 아래의 2개 예제에서는 200픽셀 높이의 플렉스 컨테이너를 사용하여 ''%%align-self%%'' 속성을 더 잘 나타냅니다.\\ \\ ==== Example ==== 컨테이너의 중간에 있는 세 번째 플렉스 아이템을 정렬합니다.\\

The align-self Property

The "align-self: center;" aligns the selected flex item in the middle of the container:

1
2
3
4
 ==== Example ==== 컨테이너의 상단에 두 번째 플레스 아이템을 정렬하고, 컨테이너의 하단에 플렉스 아이템을 정렬합니다.\\ \\ {{:wiki:css:css_note:alignselfproperty.png|}}\\

The align-self Property

The "align-self: flex-start;" aligns the selected flex item at the top of the container.

The "align-self: flex-end;"aligns the selected flex item at the bottom of the container.

1
2
3
4

The align-self property overrides the align-items property of the container.

 ===== The CSS Flexbox Items Properties ===== 다음 표에는 모든 %%CSS Flexbox%% 항목 속성이 나열되어 있습니다.\\ ^ Property ^ Description ^ | align-self | 플렉스 아이템의 정렬을 지정합니다(플렉스 컨테이너의 align-items 속성보다 우선시됩니다). | | flex | flex-grow, flex-shrink 및 flex-basis 속성에 대한 약식 속성 | | flex-basis | 플렉스 항목의 초기 길이를 지정합니다. | | flex-grow | 동일한 컨테이너 내부의 나머지 플렉스 아이템에 비례하여 플렉스 항목이 얼마나 확장될 것인지를 지정합니다. | | flex-shrink | 동일한 컨테이너 내부의 나머지 플렉스 아이템들에 비례하여 플렉스 아이템이 얼마나 축소될 것인지를 지정합니다. | | order | 동일한 컨테이너 내부에서 플렉스 아이템들의 순서를 지정합니다. | {{tag>오션, CSS Flexbox Flex items}}