flex box

gyomni·2022년 2월 11일

Week I Learned

목록 보기

9/20

flex box

🌟 박스와 아이템들을 행 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

🌟 중심축 , 반대축이 있다.
(수평선에서 수직 축을 중심축이라 하면 수평축이 반대축이 됨)

📌 container

> `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
텍스트가 균등하게 보여질 수 있도록 baseline에 맞춰서 배치.

> `align-content:`

반대축의 아이템 지정.
justify-content는 중심축에서 아이템 배치.
(justify-content에서 쓴 속성값 다 쓸 수 있음.)

: space-between
위와 아래는 딱 붙어있고, 중간 item에 스페이스 들어감.
: center
중간으로 아이템들 배치
브라우저 호환성

📌 item

> `order:`

순서를 바꿀 수 있음(잘 쓰이진 않음)

> `flex-grow:`

컨테이너를 채우기 위해 아이템이 늘어남.

기본값은 0
1부터 공간 차지해서 늘어남
(2로 하면 차지하는 값이 2인 아이템의 영역 좀 더 많아짐)
flex-grow:1
1번 아이템에만 flex-grow:1 해준 경우.
3개의 아이템에 flex-grow:1을 해준 경우.

1번 아이템에만 flex-grow:2 해주고, 나머지 2,3번 아이템에는 flex-grow:1을 해준 경우. (2,3번 아이템보다 1번 아이템이 2배로 커짐.)