2022-06-01 display: flex 를 쓴다.

css를 처음 배울 때. html의 요소를 정렬하려고 하면 float:left속성으로 정렬시키던 기억이 있다. 근데 이게 매우 손이 많이 갔었다. 띄워서 정렬하고 부모에 clearfix 주고.. 하지만 이젠 그럴 필요가 없다. 우리에겐 Flex가 있으니까!

<style>
 .container {
 	display:flex
 }
</style>

<div class="container">
	<div class="flexItem">1</div>
	<div class="flexItem">2</div>
	<div class="flexItem">3</div>
	<div class="flexItem">4</div>
</div>

이렇게 flex를 준 요소가 Flex container가 되고 그 부모 바로 아래 있는 요소들은 Flex Item이 됩니다.

 

flex에서 연계되는 속성은 이 두 요소들과 관련이 있습니다. 즉

 

- Flex Container의 속성

- Flex Item의 속성 

 

으로 나뉩니다.

 

Flex Container의 속성

display:flex 속성은 내가 정렬하고 싶은 요소의 부모 요소에게 적용시킵니다. 그러면 flex-item의 요소들은 display:inline를 준 것 처럼 본인의 내용물 만큼의 너비를 차지하는 요소가 됩니다.

display:block(위)

display:flex(중간)

display:inline-flex(아래)

 

inline-flex는 부모 요소가 inline이 된 것 처럼 아이템들의 너비합 만큼만 너비를 갖게 됩니다.

 

배치 방향 설정

아이템들의 정렬 방향을 가로로 할지, 세로로 할지, 뒤집어서 할지 정하는 속성입니다. 이때 정해지는 방향이 메인축이 됩니다.

flex-direction: 

   row // 왼쪽에서 오른쪽으로 정렬 - 메인축: 가로

   row-reverse // 오른쪽에서 왼쪽으로 정렬

   column // 위에서 아래로 정렬 - 메인축 : 세로

   column-reverse // 아래에서 위로 정렬

 

정렬 시 요소 줄바꿈 처리 설정

컨테이너가 요소들의 너비보다 작아 버리면 아이템들을 줄바꿈해서 밑으로 내릴지 결정하는 속성입니다.

flex-wrap

   nowrap // 기본 설정으로 줄바꿈하지 않음

   wrap // 요소가 컨테이너의 너비밖으로 나가면 줄바꿈하여 들어가지 못한 요소가 아래로 감

   wrap-reverse // 요소가 컨테이너의 너비 밖으로 나가면 줄바꿈하는데, 역순으로 정렬함 

숏컷

flex-flow 속성은 flex-direction과 flex-wrap을 한번에 설정할 수 있는 숏컷입니다.

flex-flow: row wrap; 이런 식으로 한칸 띄어서 쓰면 됩니다.

메인축 정렬

메인 축을 기준으로 정렬하기

justify-content

  : flex-start - 메인축 시작 지점으로 정렬

  : center - 컨테이너의 가운데로 정렬

  : flex-end - 메인축 끝 지점으로 정렬

  : space-between - 컨테이너 너비를 기준으로 flex-item 들의 사이 간격에 맞게 정렬해준다.

  : space-arount - flex-item들의 양옆에 간격을 주어 정렬해준다.

  : space-evenly - between과 비슷하게 아이템들 사이에 간격을 주지만, 아이템과 컨테이너의 벽 즉 양 끝의 거리도 계산해서 정렬해준다.

 

메인축의 수직축 방향정렬

메인 축의 수직이 되는 축으로 정렬하기

align-items

  : flex-start - 축의 시작 지점으로 정렬

  : flex-end - 축의 끝 지점으로 정렬

  : stretch - 컨테이너의 사이즈에 맞게 요소를 늘려서 꽉 채움

  : center  - 축의 가운데 정렬

  : space-between, : space-around, space-evenly 는 위와 같다.

 

flex 아이템의 속성

아이템의 사이즈 설정 - min-width와 비슷

flex-basis

   : css 단위

   : auto - 기본값으로 아이템의 너비가 되고, width가 지정되지 않으면 content의 크기를 갖는다.

   : content - 콘텐츠 사이즈

 

flex 아이템이 flex-basis보다 커질 수 있는가를 설정한다.

flex-item이 차지한 너비를 제외한 여백을 flex-grow의 비율 대로 나눠서 갖는다.

flex-grow

   : number

 

아이템이 flex-basis보다 작아질 수 있는가 설정하는 속성으로 숫자를 받는다. 0보다 크면 flex요소로 변하고 flex-basis보다 작아진다. 이때 0을 주면 아이템의 크기가 변하지 않기 때문에 고정 너비의 아이템을 만들 수 있다.

 

숏컷

flex

   : flex-grow, flex-shrink, flex-basis 순으로 한번에 설정할 수 있는 솟성이다.