31일차 배운 것 정리

1. CSS- Flex-Items

1-1. flex-grow

default: 0 , 증가되는 너비의 비율을 나타내는 속성

• 0일 경우, 증가되는 너비 비율이 없기 때문에, item의 너비 그대로 가짐

• 1일 경우, 증가되는 너비 비율을 1:1:1 ... 로 가지게 됨

• item 마다 서로 다른 flex-grow를 지정해주어, 너비의 비율을 지정해줄 수 있음 ( 1:2:1 )

1-2. flex-shrink

default: 1 , 요소의 감소 너비 비율을 나타내는 속성

• flex-shrink: 0 의 경우 container의 너비가 작아진다면, item들이 줄어들지 않고, 크기를 유지하게 되어 튀어나가게 됨

• item1, item2, item3 있을 때, item2의 경우 크기를 고정되도록 하고 싶다면, flex-shrink를 각각 1:0:1 로 지정한다.
• item3을 훨씬 더 줄이고 싶다면 1:0:4 와 같이 비율조절이 가능하다.

1-3. flex-basis

default: auto , 요소의 기본 너비를 지정하는 속성

1.4 flex

flex-grow, flex-shrink, flex-basis 3가지 속성을 한 번에 작성하는 단축 속성

• 개별 요소를 모두 작성하는 것을 권장!

1.5 order

default:0, flex-Item들의 정렬 순서를 지정할 수 있다. 값이 클 수록 뒤쪽으로 배치하게 됨

1.6 align-self

default: auto , container에 적용되어 있는 align-items값을 상속받는다. align-items 속성을 하나의 줄 단위가 아닌, 개별 Item들에 대하여 레이아웃을 잡을 때 사용

• container의 align-items: flex-end 속성을 통해, 각각의 줄은 축의 끝 부분(아래)에 붙도록 정렬된 상태
• 1번째 Item값만을 축의 시작부분으로 올리고 싶다면, align-self: flex-start; 로 개별지정하도록 함

1.7 요약 정리

• flex-grow
• default:0 , 증가너비 비율 속성

• flex-shrink
• default:1 , 감소너비 비율 속성

• flex-basis
• default:auto , Item의 기본 너비 값 지정 (auto는 지정된 width,height값 의미)

• flex의 주의 사항
• basis의 default값이 auto가 아닌 0이 할당됨 → 생략보다 다 같이 쓰는 것 권장

• order
• 값이 낮을 수록 앞에 위치하게 됨

• align-self
• 한 줄 별로 적용되는 align-items속성을 개별 아이템 단위로 적용할 수 있다.

1.8 여백을 주는 방법 (gap , margin)

gap 속성 을 통해 flex-Items간의 여백을 지정할 수 있다.