CSS - Flex

Container 

- display

- flex-direction

- flex-wrap

[shorthand] flex-flow : column wrap;

 

- justify-content

- align-item (한 줄에 대한 정렬)

- align-content (여러 줄에 대한 정렬)

- align-self (align-item 사용 시 한가지 아이템에만 따로 적용)

 

Item

- align-self (align-item 사용 시 한가지 아이템에만 따로 적용)

- flex-grow

• flex-grow : 1
  → n개가 동일한 크기로 꽉채워짐
• Container에 flex-wrap 
  → wrap 시 개행된 두번째 줄 꽉채워짐
• 0이 기본
• .item:nth-child(2) 는 2, .item:nth-child(3) 1 일 시 2 : 1

-  flex-shrink

• 얼마나 작아질 지
• 1이 기본 (사이좋게 1로 줄어듬)
• 0으로 하면 자기 width값을 가진다, 줄여지지 않음

 - flex-basis

• auto 기본
• flex-basis: 100px; (아이템의 컨텐츠 텍스트 포함 100px)
• flex-basis: 0; (width 가로 0, flex-grow로 가로 조절.)

 

[shorthand]

flex : 1 = flex-grow : 1, flex-basis : 0 ( flex-basis 기본값 auto 아니라 0으로 동작. )

• number를 지정하면 <flex-grow>입니다.
• length 또는 percentage를 지정하면 <flex-basis>

flex : 1 2 = flex-grow: 1, flex-shrink: 2

flex : 1 50px = flex-grow: 1, flex-basis: 50px;

• 두 번째 값은 다음 중 하나여야함.
• number를 지정하면 <flex-shrink>
• length,percentage 또는 auto를 지정하면 <flex-basis>

flex : 1 2 100px; flex-grow: 1, flex-shrink: 2; flex-basis: 100px;

• 세 번째 값은 다음 중 하나여야함.
• <flex-basis> 에 사용할 length, percentage 또는 auto

flex : initial; = flex: 0 1 auto; (flex 사용하지 않았을 때와 동일)

flex : auto; = flex: 1 1 auto;

flex : none; = flex: 0 0 auto;