[03] 2022.07.20

Rio·2022년 7월 20일
0

React

목록 보기
4/8
post-thumbnail

🧃 Flexbox

박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 layout 모델이다.
1차원 모델이라 부르는 이유는, layout을 다룰 때 한번에 하나의 차원(행or열)만 다룰 수 있기때문이다.
요소를 담은 부분을 flexbox 또는 flex 컨테이너라고 한다.
일단, 요소를 flex컨테이너로 만들기위해서는 display:flex를 적용시키면 된다.

추축과 교차축

flex에는 주축과 교차축이 있다. 가로가 주축이 되면 세로가 교차축, 세로가 주축이 되면 가로축이 교차축이 된다.

flex-direction

flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향,역방향)을 지정한다.

속성

  • row : 기본값, 주축 = 행, 방향 = 콘텐츠의 방향과 동일
  • row-reverse : 주축 = 행 , 방향 = 콘텐츠의 방향과 반대
  • column : 주축 = 열, 방향 = 콘텐츠 방향과 동일
  • column-revers : 주축 = 행, 방향 = 콘텐츠의 방향과 반대

justify-content

주축 배치 방법으로, 축을 기준으로 요소들 간의 배치 방법(간격)을 결정할 수 있다.

속성

  • ceneter : 축의 가운데 정렬
  • flex-start : 축의 맨 앞부터 정렬
  • flex-end : 축의 맨 뒤부터 정렬
  • space-around : 모든 요소들을 축의 길이 공간을 균등하게 나눠 띄워 배치한다. 텍스트의 전체정렬같은 느낌...?
  • space-between : 일단 요소 두개를 축의 좌우에 붙여놓고, 가운데 남은 공간을 균등하게 요소들을 띄워 배치한다.

align-item

교차축 배치 방법, 축을 기준으로 요소들 간의 배치 방법(간격)을 결정할 수 있다.

속성

  • justify-content와 동일

align-self

교차축 개별요소 배치 방법으로, align-content와 달리 align-self는 요소 하나 하나 배치 방법을 결정할 수 있다.

속성

  • justify-content와 동일

flex-wrap

줄 바꿈 여부으로, 요소들이 flex컨테이너 축의 길이를 넘어가게 되는 경우 처리하는 방법을 결정할 수 있다.

❗️주의!
flexbox는 자식 요소들이 자기의 크기보다 크다면, flexbox는 자식 요소들의 크기를 축소시킨다.

속성

  • nowrap: 기본상태로, 자식요소들이 flexbox의 크기보다 크면 자식요소를 축소시킨다.
  • wrap : 자식요소의 길이 합이 주축보다 클 경우, 자동으로 줄바꿈을 시켜 이동시킨다.
  • wrap-reverse : 줄바꿈을 밑에서부터 위로 시킨다.

z-index

요소의 쌓임 순서(stack order)를 정의할 수 있다.
정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의
위치 지정 요소에 대해 적용할 수 있는 속성이다.
정수 값이 클 수록 상단에 위치하게 된다.

사진 위에다 버튼 구현하려고 할 때 사용하면 될 듯!

profile
우당탕탕 개발 기록지

0개의 댓글