Flex Items를 위한 속성들은 다음과 같습니다.
order : Flex Item의 순서를 설정
Item에 숫자를 지정하고 숫자가 클수록 순서가 밀립니다.(음수 허용)
order: -2 : 음수이면 양수보다, 음수 값이 클 수록 순서가 앞으로 이동합니다.
order: 0 : 기본 값
order: 3 : 양수이면 음수보다, 양수 값이 클 수록 순서가 뒤로 이동합니다.
flex-grow : Flex Item의 증가 너비 비율을 설정 (기본 값 : 0)
숫자가 크면 더 많은 너비를 가집니다.
Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다.
flex-shrink : Flex Item의 감소 너비 비율을 설정 (기본 값 : 1)
숫자가 크면 더 많은 너비가 감소합니다.
Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다.
flex-basis : Flex Item의 (공간 배분 전) 기본 너비 설정 (기본 값 : auto)
값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정할 수 있습니다.
하지만 단위 값이 주어질 경우 설정할 수 없습니다.
flex-basis: auto
flex-basis: 0
flex-basis: 100px
⚠️ flex 속성에서 설명한 것 같이 단축 속성 내에서 flex-basis를 생략하면 값이 0이 되는 것을 주
의 합시다.
flex : flex-grow, flex-shrink, flex-basis 의 단축 속성
flex: initial : (기본값) : grow=0, shrink=1, basis=auto
flex: none : grow=0, shrink=0, basis=auto
flex: auto : grow=1, shrink=1, basis=auto
flex: 1 : grow=1, shrink=1, basis=0
flex: 1 1 : grow=1, shrink=1, basis=0 (보통 일반적으로 많이 사용)
flex: 1 1 : 증가너비 감소너비 (flex-basis는 auto가 아닌 0)
flex: 1 20px : 증가너비 기본너비 (flex-basis는 20px)
align-self : 교차 축(cross-axis)에서 Item의 정렬 방법을 설정 (기본 값 : auto)
align-items는 Container 내 모든 Items의 정렬 방법을 설정합니다.
필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있습니다.
이 속성은 align-items 속성보다 우선합니다.
align-self: auto : Container의 align-items 속성을 상속받음
align-self: stretch : Container의 교차 축을 채우기 위해 Item을 늘림
align-self: flex-start : Item을 각 줄의 시작점(flex-start)으로 정렬
align-self: flex-end : Item을 각 줄의 끝점(flex-end)으로 정렬
align-self: center : Item을 가운데 정렬
align-self: baseline : Item을 문자 기준선에 정렬
⚠️ 우선순위
align-content > align-items > align-self 로 오른쪽으로 갈 수록 우선순위가 높습니다.
💡 No justify-self in Flexbox? No problem
부모 요소나 자식 요소에 flex-grow: 1 을 선언하여 빈 공간을 채운 뒤 다음과 같이 선언한다.
*margin-left: auto : 오른쪽으로 정렬된다.*
*margin-right: auto : 왼쪽으로 정렬된다.*
→ 둘 다 사용 시 가운데로 정렬된다.
[ Flex-grow ]
첫 번째 Item은 총 너비의 25% (1/4)을,
두 번째 Item은 총 너비의 50% (2/4)를,
세 번째 Item은 총 너비의 25% (1/4)을 가지게 됩니다.
[ Flex-shrink ]
[ Flex-basis ]