🌟 박스와 아이템들을 행 or 열을 자유자재로 배치시켜줌.
🌟 박스(container)에 지정하는 속성값 들이 있고, 박스 안에 들어가는 item에 지정되는 속성 값이 있다. 🌟 container 속성값
=> display
, flex-direction
, flex-wrap
,flex-flow
, justify-content
, align-items
, align-content
🌟 item 속성값
=> order
, flex-grow
, flex-shrink
, flex
, align-self
🌟 중심축 , 반대축이 있다.
(수평선에서 수직 축을 중심축이라 하면 수평축이 반대축이 됨)
display:flex
flex-box 사용하기 위해서 설정.
flex-direction:
: row
(왼 -> 오): row-reverse
: column
: column-reverse
flex-wrap:
화면 크기 줄여도 아이템 한 줄에 빼곡히 붙어있음
: nowrap
wrap
: 아이템이 한줄에 꽉차면 자동적으로 다음 라인으로 넘어감화면 더 줄이면↓wrap
하면 : wrap-reverse
flex-flow:
flex-direction
,flex-wrap
묶은 것,flex-flow: column nowrap
이런식으로 한번에 두가지 속성을 작성할 수 있음.justify-content:
중심축에서 아이템 어떻게 배치할 지 결정.
: flex- start
: flex-end
flex-direction
이 column
이면 밑에서 위로 배치.여기서~⭐~⭐
(1)flex-direction: column-reverse
와
(2)justify-content: flex-end
의 차이점!!
(1) 은 1~10까지 있을 때 아래에서부터 1~10이 쌓여졌다면
(2) 는 아이템의 열은 그대로 유지하고 아이템만 아래로 내려줌.
: center
: space-around
: space-evenly
: space-between
align-items:
반대축에서 아이템 어떻게 배치할 지 결정하는 속성.
: center
: baseline
align-content:
반대축의 아이템 지정.
justify-content
는 중심축에서 아이템 배치.
(justify-content
에서 쓴 속성값 다 쓸 수 있음.)
: space-between
: center
order:
순서를 바꿀 수 있음(잘 쓰이진 않음)
flex-grow:
컨테이너를 채우기 위해 아이템이 늘어남.
flex-grow:1
flex-grow:1
해준 경우.flex-grow:1
을 해준 경우.flex-grow:2
해주고, 나머지 2,3번 아이템에는 flex-grow:1
을 해준 경우. (2,3번 아이템보다 1번 아이템이 2배로 커짐.) flex-shrink:
컨테이너 점점 작아졌을 때 어떻게 행동하는지 지정.
(flex-shrink
값을 각각 1 1 1 주면 같은 크기로 줄어 들고, 2로 지정한 item은 더 많은 영역이 줄어듦)
flex-shrink:1
지정한 경우.flex-shrink:2
,flex-shrink:1
지정 할 경우.(아이템1이 2,3에 비해 더 많이 줄어듦.)여기서~⭐~⭐
flex-grow
와flex-shrink
는!!
container의 사이즈가 바뀌었을 때
item들이 얼마나 어떻게 더 줄어들고 늘어나야하는지를 정리하는 속성!
flex-basis:
아이템들이 공간을 얼마나 차지하는지 더 세부적으로 명시할 수 있도록 도와줌.
grow
나 shrink
에 지정된 값으로 변형. grow
나 shrink
쓰지 않고 align-self:
아이템 별로 정렬할 수 있음.
컨테이너에서 지정된것 벗어나서 아이템 하나만 특별히 배치하고 싶을 경우 사용.
align-self:center
적용한 경우.참고 자료 : 드림코딩