2020-10-28 TIL

2020/10/27 - [TIL(today I learned)] - 2020-10-27 TIL

2020-10-27 TIL

 

 

Flex-Wrap

 

flex-wrap 의 값들 wrap, wrap-reverse, nowrap(default)

wrap은 콘텐츠 값이 부모의 범위 값을 벗어나면 다음 row로 넘기는 property

wrap-reverse를하면 cross-axis의 값이 반대가 된다.

 

 

Align-Items

align-items의 value들

flex-start, flex-end, center, baseline

baseline은 글 적은 문장의 줄을 기준으로 정렬함 (문장의 가장 큰 폰트 사이즈 중앙에 반응함)

justify-content는 main-axis의 진행방향이 왼쪽에서 오른쪽으로 진행한다는 기준으로 정렬이 된다면

align-item은 cross-axis의 진행방향이 위에서 아래로 진행한다는 기준으로 정렬이 된다.

여기서 wrap-reverse를 하면 cross-axis의 진행방향이 반대가 되니까 그것도 생각해야한다.

한번 연습을 해봐야겠다.

 

Align-Content & Align-Self

 

align-content는 wrap, wrap-reverse가 되어있을때 작동한다.

왜냐면 wrap이 안되면 한줄로 정렬되고(main-axis만 사용) 

row가 생성이 안된다(cross-axis를 사용안함)  ->> This property has no effect on single line flex containers

developer.mozilla.org/en-US/docs/Web/CSS/align-content

align-content

 

 

align-self는 단일 요소를 대상으로 정렬하는것

flex property들은 하위대상에 적용시키는 property이지만 이건 개별적으로 적용하기 때문에 적용하고자 하는 대상 그자체에 value를 적용시킨다.

developer.mozilla.org/en-US/docs/Web/CSS/align-self

align-self

 

 

Flex-Basis, Grow, & Shrink

 

The flex-basis CSS property sets the initial main size of a flex item

 

 flex basis is just the initial size that an element should be added into our box as and it might be with it might be a height depending on the main axis direction.

 

flex-grow는 작은 컨텐츠를 비율에 맞게 공간을 채우게 하고

flex-shrink는 큰 컨텐츠를 비율에 맞게 공간에 맞춘다.