CSS FlexBox

Min Hyung Kim·2021년 7월 18일
0

flexbox를 이해하기 위해서는 크게 두가지가 중요하다.
1. flexbox에는 container와 item에 적용할 수 있는 속성값들이 있다.
2. 중심축과 반대축이 있다.(main axis, cross axis)

Material Design : 색깔 적용해 볼 수 있는 사이트

container 기본 예제

여기서 flexbox를 적용하려면 아이템을 담고 있는 박스의 클래스인 "container"의 속성값에
"display : flex;" 를 추가해야한다.
기본값으로 flex-direction은 row이다. (세로로 정렬을 하려면 column으로 변경)

flex-wrap의 기본값은 nowrap이다. 화면 크기가 작아져도 유연하게 아이템들의 형태를 유지한다.

wrap으로 바꾸면, 자동적으로 다음줄로 아이템들이 넘어간다.

flex-flow를 통해 flex-direction과 flex-wrap을 함께 사용할 수 있다.

justify-content : 중심축을 기준으로 어떻게 아이템을 배치할것인지 설정
flex-start : 좌측정렬(기본값)
flex-end : 우측정렬
center : 가운데정렬

space-around : 아이템들 주변에 공간 일정하게 배치. 양 끝 아이템들 좌측과 우측 공간에 비해 각 아이템들 사이 공간 넓이는 2배

space-evenly : 아이템들 사이의 공간이 같도록 배치. 양 끝 공간과 아이템들 사이의 공간 넓이가 일정.

space-between : 양 끝 아이템은 화면과 딱 붙이고, 각 아이템들의 공간이 일정하게 배치

align-items : 반대축을 기준으로 어떻게 아이템을 배치할것인지 설정

baseline : 텍스트가 균등하게 보여지도록 배치


align-content : 반대축을 기준으로 justify-content와 동일한 역할 수행
※다만 아직 지원이 안되는 기능들이 많이 있으니, caniuse 와 같은 사이트로 확인 후 사용할것.



item 기본 예제

flex-grow : 화면 크기에 맞춰 어떤 비율로 크게 늘어날지 설정. 중심축 기준으로 꽉 차게 배치된다.

flex-shrink : 화면 크기가 줄어들때 어떤 비율로 줄어들지 설정.

flex-basis : 아이템의 크기 비율을 결정.
기본 설정은 auto.

align-self : 아이템별로 배치 설정.

Flexbox Froggy : flexbox를 연습할 수 있는 사이트.

profile
지금은 갈팡질팡하지만 점차 바르게 걷게될지어다

0개의 댓글