박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 layout 모델이다.
1차원 모델이라 부르는 이유는, layout을 다룰 때 한번에 하나의 차원(행or열)만 다룰 수 있기때문이다.
요소를 담은 부분을 flexbox 또는 flex 컨테이너라고 한다.
일단, 요소를 flex컨테이너로 만들기위해서는 display:flex를 적용시키면 된다.
flex에는 주축과 교차축이 있다. 가로가 주축이 되면 세로가 교차축, 세로가 주축이 되면 가로축이 교차축이 된다.
flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향,역방향)을 지정한다.
주축 배치 방법으로, 축을 기준으로 요소들 간의 배치 방법(간격)을 결정할 수 있다.
교차축 배치 방법, 축을 기준으로 요소들 간의 배치 방법(간격)을 결정할 수 있다.
교차축 개별요소 배치 방법으로, align-content와 달리 align-self는 요소 하나 하나 배치 방법을 결정할 수 있다.
줄 바꿈 여부으로, 요소들이 flex컨테이너 축의 길이를 넘어가게 되는 경우 처리하는 방법을 결정할 수 있다.
❗️주의!
flexbox는 자식 요소들이 자기의 크기보다 크다면, flexbox는 자식 요소들의 크기를 축소시킨다.속성
- nowrap: 기본상태로, 자식요소들이 flexbox의 크기보다 크면 자식요소를 축소시킨다.
- wrap : 자식요소의 길이 합이 주축보다 클 경우, 자동으로 줄바꿈을 시켜 이동시킨다.
- wrap-reverse : 줄바꿈을 밑에서부터 위로 시킨다.
요소의 쌓임 순서(stack order)를 정의할 수 있다.
정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의
위치 지정 요소에 대해 적용할 수 있는 속성이다.
정수 값이 클 수록 상단에 위치하게 된다.
사진 위에다 버튼 구현하려고 할 때 사용하면 될 듯!