[html/css] 100일 코딩 챌린지 - flex 박스

목차

1. flex-direction

2. flex-wrap

3. flex-row

4. align-items

5. justify-content

css에서 정말 유용하게 쓰이는  중 하나가 flex박스입니다.

display 속성을 flex로 하게 되면, 주축을 설정해 편리하게 아이템을 배치할 수 있습니다.

header{
  display: flex;
}

위는 예시로, 헤더 박스의 display를 flex로 설정한 css 코드입니다.

Mozilla 공식 사이트에서 flex박스의 정보를 더 확인할 수 있습니다.

다음은 display:flex;를 설정했을 때 같이 사용할 수 있는 여러 부가적인 속성들입니다.

 

1. flex-direction

flex-direction: row;

주축의 방향을 설정하는 속성입니다.

주축(main-axis)이 수평이 되면, 교차 축(cross-axis)은 수직이 됩니다.

기본값은 row이기 때문에, flex-direction을 설정하지 않으면 기본적으로 아이템들이 가로로 배치된다.

이걸 column으로 바꾸면 주축은 수직이 되고, 교차 축은 수평이 됩니다.

 

2. flex-wrap

flex-wrap: nowrap;

wrap을 설정할지 말지 결정하는 속성입니다.

기본값은 nowrap이고, width를 따로 지정하지 않고 wrap으로 설정할 경우, 브라우저 창의 크기에 따라 컨테이너의 너비를 재정의합니다.

위 사진처럼 nowrap으로 설정할 경우, 이렇게 화면 크기를 줄일 경우 아이템이 잘리게 됩니다.

 

 

하지만 wrap으로 설정하면 화면 크기를 줄일 경우 아이템이 잘리지 않고 아래로 내려가게 됩니다.

 

3. flex-row

flex-flow: row nowrap;

flex-direction과 flex-wrap을 합친 것입니다.

direction과 wrap 여부를 차례대로 쓰면 됩니다.

 

4. align-items

align-items: center;

align-items는 아이템들을 수직적으로 원하는 위치에 정렬시킵니다.

 

위 화면처럼 align-items: center;를 사용하면 아이템들을 모두 가운데에 맞춰집니다.

 

align-items: flex-start;를 쓰면 모두 위에 맞춰집니다.

 

5. justify-content

justify-content: center;

justify-content는 수평적으로 아이템들을 배치할 수 있습니다.

justify-content 속성에는 다양한 종류가 있습니다.

 

justify-content: space-between;

먼저 space-between은 flex 박스가 컨테이너 안에 있는 요소들을 왼쪽/오른쪽 양 끝으로 보내,

가운데에 공간이 생기게 합니다.

이렇게 양 끝에 item이 있는 것을 확인 가능합니다.

 

(참고로, 브라우저 검사에 들어가 컨테이너쪽 태그의 flex 버튼을 누르면 이렇게 빈 공간을 빗금으로 확인할 수 있습니다.)

 

 

이외에도 space-around는 각 아이템의 양쪽에 같은 공간을 할당해주고,

(그럼 가운데 공간은, 양 옆의 공간의 2배만큼의 공간이 생길 것입니다)

space-evenly는 전체 기준으로 공간을 똑같이 나눕니다.

 

이 외에도 아이템들을 왼쪽, 오른쪽으로 미는 flex-start와 flex-end도 있습니다.