안녕하세요 이번 포스팅은 저번 포스팅에 이은 반응형 CSS Flex박스 2 포스팅입니다.
CSS에 여러가지 속성이 있으니 이렇게 정리를 해놓고 필요할 때마다 볼려고 정리 해둡니다.
Align-items
교차축에 따라 아이템을 배열한다.
⇒ justify-content는 주축을 따르고 Align-items는 교차축을 따른다.
단순히 아이템을 수직으로 배열하는 게 아님
왜냐 교차축이 수평일수도 있고 주축이 다르게 되어있을 수도 있음
속성값
default 는 flex-start
flex-end : 교차축에 끝에서 시작점으로 배치된다.
center : 수직과 수평 방향을 한번에 중앙 정렬하고 싶을 때 사용
baseline : 텍스트 기준선에 맞춰서 정렬된다.
⇒ 요소안에 텍스트를 넣어야한다.
각 글자를 잇는 줄을 하나 긋는다고 생각하면 된다.
요소마다 높이가 다르다면 baseline이 유용할 것이다.
텍스트가 있는 요소를 정렬하고 싶을 때 유용
참고 : 요소의 크기에상관없이 똑같이 정렬된다.
flex-warp 이랑 align-items 랑 세트로 가야한다.
align-content
행이나 열이 여러개일 때 교차축을 기준으로 정하는 속성
⇒ 여러 행, 열이 있을때만 사용하는 정렬 방법임
EX_ 수직을 주축으로 할 떄 열사이 공간을 조정
반대로 수평이 주축이면 행사이 고간을 조정
속성값은
flex-start
flex-end
center
space-between
align-self
align-items과 비슷하지만 단일 요소에만 사용하거나 플렉스 컨테이너에서 두개의 요소에서 개별로 사용한다.
⇒ 교차축을 기준으로 배열된 단일 요소의 위치를 바꿀 수 있다.
⇒하나의 요소만 위치를 바꿀 때 사용한다.
Flex-Basis
요소가 배치되기 전에 요소의 최초 크기를 결정
플렉스 컨테이너에 추가되기 전 시작점 같은 것
⇒ 부모요소에 적용
주축에 방향에 따라 걸쳐있음
Flex-grow
공간이 있을 때 요소가 그 공간을 얼마나 차지할지 정한다.
컨테이너에 여백이 남을 때 사용
⇒ 공간을 다 차지한다.
⇒ 다른 요소에도 다 적용시킬 수 있다.
flex-grow : 1
값을 비율이다.
⇒ 항상 커지는 게 아니라 남는 여백이 있을때만 커진다.
flex-shrink
컨테이너에 충분한 공간이 없을 때 비율이 줄어드는 것을 조절한다.
⇒ 다른요소에 비해 얼마나 줄어들 게 할 것인지 정하는 것
Flex Shorthand (속기법)
3가지를 동시에 적을 수 있다.
flex : flex-grow flex-shrink flex-basis
단위는 basis만 있음
grow랑 shrink는 사이즈가 없음
여러분들도 보고 참조하세요!
'웹 > CSS' 카테고리의 다른 글
| 반응형 디자인과 미디어 쿼리에 대해 알아보기 (0) | 2023.04.13 |
|---|---|
| 반응형 CSS Flex 박스1 - (flex, justify-content ,Flex-Wrap) (0) | 2023.04.11 |
| 알면 유용한 CSS 속성2 - (hover,box-shadow) (0) | 2023.04.10 |
| 알면 좋은 유용한 CSS속성들1 - (알파채널, Opacity(불투명도),transitions,Transform) (0) | 2023.04.09 |
| CSS 단위 알아보기 (0) | 2023.04.08 |
