[CSS ] display: flex 속성

flex Container: 문서의 영역 중에서 flexbox가 놓여있는 영역

flex Container 생성 방법: 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정

• 이 값이 지정된 컨테이너의 일차 자식이 flex item이 됩니다

• Container에서 사용 가능한 속성: display, flex-flow, justify-content
• Items에서 사용 가능한 속성: order, flex, align-self

 

 

 

flex 속성 기본값은 아래와 같습니다.

 

• 항목은 행으로 나열됩니다. (flex-direction: row)
• 항목은 주축의 시작 선에서 시작합니다.
• 항목은 주 차원 위에서 늘어나지는 않지만 줄어들 수 있습니다.
• 항목은 교차축의 크기를 채우기 위해 늘어납니다.
• flex-basis는 auto로 지정됩니다.
• flex-wrap은 nowrap으로 지정됩니다.

 

 

 

 

 

 

<flex-grow> 는 묻습니다. 얼마나 많은 공백을 얻습니까? 

• 숫자만큼 여백 칸을 나누어 가집니다.
• <number value>를 가집니다. 생략 시 기본값은 0입니다.

 

 

<flex-shrink> 는 묻습니다. 이 항목에서 제거할 수 있는 여유 공간은 얼마나 됩니까?

• 공간이 부족할 때, flex-shrink 값이 양수이면 flex-basis에 지정된 크기보다 작아집니다.
• 또한, flex-grow 속성과 마찬가지로 숫자만큼 큰 폭으로 줄어듭니다.
• <number value>를 가집니다. 0으로 설정 시 공간이 줄어들지 않으며, 생략 시 기본값은 1입니다.

 

<flex-basis> 는 묻습니다. 확장 및 축소가 발생하기 전 항목의 크기는 얼마입니까?

• flex-basis 속성값은 content 키워드를 사용하거나, width(length, percentage, auto)를 나타내는 단위를 사용합니다.
• 0을 지정하려면 <flex-grow> 또는 <flex-shrink>로 읽히지 않도록 단위를 붙여야 합니다. 생략 시 기본값은 auto입니다.
• 한 개 또는 두 개의 단위 없는 숫자 값을 사용할 때, <flex-basis>의 값은 auto가 아니라 0이 됩니다. auto 값을 가지지 않은 flex-basis와 width 값을 동시에 적용한 경우 flex-basis가 우선합니다.

flex-basis  속성의 값을  auto 로 설정하면 flex item은 상대적 flex item(relative flex item)이 되어 콘텐츠의 크기를 기준으로 크기가 결정된다.

flex의 축약형 속성

보통은 flex-grow, flex-shrink, flex-basis 값을 각각 사용하지 않고 이 세 속성을 한번에 지정하는 flex 축약형을 많이 사용합니다. flex 축약형의 값은 flex-grow, flex-shrink, flex-basis 순서로 지정됩니다.

 

 

값이 한 개일 때

• number : flex-grow
• flex: 2;
• length or percentage : flex-basis
• flex: 10em; flex: 30%;

 

값이 두 개일 때

• 첫 번째 값은 number : flex-grow
• 두 번째 값이 number이면 : flex-shrink
• flex: 10em; flex: 30%;
• 두 번째 값이 length or percentage이면 : flex-basis
• flex: 1 30px;

 

값이 세 개일 때

• number, number, lenth or percent
• flex-grow, flex-shrink, flex-basis
• flex: 2 2 10%;

 

flex 기본값

initial

• 아이템 크기가 각각의 width와 height 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수는 있지만, 남은 공간을 채우려 늘어나지는 않습니다.
• flex: 0 1 auto와 동일합니다.

auto

• 아이템 크기가 각각의 width와 height 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수 있으며, 남은 공간을 채우기 위해 늘어날 수도 있습니다.
• flex: 1 1 auto와 동일합니다.

none

• 아이템 크기가 각각의 width와 height 속성에 따라 정해지며, 컨테이너의 크기에 관계 없이 변하지 않습니다.
• flex: 0 0 auto와 동일합니다.

 

 

 

 

flex-direction: 주축 정하기

• row(default) 혹은 row-reverse: 가로 정렬, 인라인 방향으로 따른다
• column 혹은 column-reverse: 세로 정렬, 블록 방향으로 따른다
• cross-axis: 교차축
• 왼쪽-오른쪽으로 생각하는 것보다 시작선-끝선으로 생각하는 것이 금새 자연스러워질 것이다.

 

 

flex-flow: 축약형 속성

• flex-direction 속성과 flex-wrap 속성을 속성으로 합칠 수 있습니다. 첫 번째 값은 flex-direction이고 두 번째 값은 flex-wrap입니다.
• { display: flex; flex-flow: row wrap; }
• wrap: 표기 방향의 길이를 한정하고 여백이 없어질 경우 의미가 있습니다. 줄바꿈하여 밀어올려 줍니다.

 

 

justify-content: 메인 축에 대해 정렬하기

• stretch/ flex-start(default)/ flex-end/ center/ space-between/ space-around

 

order: 순번 정하기

• item의 속성

 

 

flexbox 익히기 게임: flexboxfroggy.com/#ko