css - flexbox(flex, flex-grow, flex-shrink, flex-basis)

기존의 CSS의 display, float, position 등과 같은 속성을 사용해서 구현하는 방법으로는 많은 레이아웃을 복잡하게 구현해야하는 경우가 발생합니다.

 

이러한 문제를 해결하기 위해서 등장한 것이 flexbox입니다.

 

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식입니다.

 

flexbox의 구성

- 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성됩니다. 

 

 

- flexbox를 만드는 방법은 간단합니다. 정렬하려는 부모 요소에 다음과 같이 display: flex 속성을 사용하면 됩니다. 

.flex_container{
	display:flex;
}

 

- flex 속성이 적용된 요소는 flex container가 되고, flex container의 자식 요소는 flex item이 됩니다.

- flex item은 주축(main axis)에 따라 정렬됩니다. 주축의 방향은 flex container와 flex-direction 속성으로 결정합니다. 

- flex-direction은 기본값으로 row가 설정되며, 이는 왼쪽에서 오른쪽으로 정렬을 의미합니다. column의 경우는 위에서 아래로 정렬됩니다.

 

- flexbox에서 사용하는 속성은 부모 요소인 flex container에 정의하는 속성 + flex item에 정의하는 속성으로 나누어집니다.

- 전체적인 정렬이나 흐름에 관련된 속성은 flex container에 정의하고, 자식 요소의 크기나 순서에 관련된 속성은 flex item에 정의합니다. 

 

- flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content

- flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order

 

flex : 1 속성으로 자식 요소의 크기 확장

- 각각 flex-grow, flex-shrink, flex-basis 속성을 축약해서 아래와 같이 나타낼 수 있습니다. 

           
.child { flex: 1 1 0;}

 

- 또한 flex:1 로 축약할 수 있는데 이는 flex: 1 1 0;과 같은 의미로 사용할 수 있습니다.

 

flex-grow 속성

- flex item의 확장에 관련된 속성입니다. 0과 양의 정수를 속성값에 사용합니다.

- 속성값이 0이면 container의 크기가 커지지 않고 원래 크기로 유지됩니다. 

- 속성값이 1이상이면 flex container가 커질 때 flex item의 크기도 커지게 할 수 있습니다.

 

 

flex-shrink 속성

- flex item의 축소에 관련된 속성입니다. 0과 양의 정수를 속성값에 사용합니다. 기본값은 1입니다.

- 속성값이 0이면 flex container의 크기가 flex item의 크기보다 작아져도 flex item의 크기가 줄어들지 않고 원래 크기로 유지합니다.

- 속성값이 1이면 flex container의 크기가 flex item의 크기보다 작아질 때 flex item의 크기가 flex container의 크기에 맞추어 줄어듭니다. 

 

 

flex-basis 속성

- flex item의 기본 크기를 결정하는 속성입니다. 기본값은 auto입니다.

- flex-basis 속성의 값을 30px이나 30%와 같이 설정하면 flex item의 크기가 고정됩니다.

 

 

- flex-basis 속성의 값을 auto로 설정하면 flex item은 상대적 flex item이 되어 콘텐츠의 크기를 기준으로 크기가 결정됩니다.

 

flex: 1의 의미 

- flex: 1의 속성은 flex: 1 1 0 속성을 의미합니다. 즉, flex-grow 속성의 값이 '1'이고 flex-shrink 속성의 값이 '1'이기 때문에 flex container의 크기에 따라 flex item의 크기도 커지거나 작아진다는 의미입니다. 

 

 

위 글은 다음의 사이트를 참고하여 작성하였습니다.

https://d2.naver.com/helloworld/8540176