[css] flexbox로 액자형 레이아웃의 모든것. 총정리ver

✍️개요

 

가로배치는 웹사이트에서 가장 많이 쓰이는 요소 중에 하나 입니다.

위는 네이버 메인페이지에서 가져온 부분입니다. 위에서도 가로배치가 쓰이고 있고, 

 

애플스토어에서도 위와 같이 가로배치 레이아웃이 쓰이는 것을 알 수 있습니다. 매우 흔한 레이아웃입니다.

 

오늘은 flexbox를 이용하여 가로배치 하는 법을 포스팅 하도록 하겠습니다.

 

✍️ 프로젝트 초기상태 및 flex

지금 위에있는 Block들을 가로배치 하고 싶습니다. 이때 가로배치하고 싶은 요소들의 부모에 해당하는 요소 다음과 같이 속성을 줍니다.

.flex-parent{
	display: flex;
}

 

위와 같이 가로배치가 되기는 합니다만.. 크기가 컨텐츠의 크기만큼 줄어듭니다.

 

🖐 이제부터 나올 내용은 flex-items 즉, 위 코드에서 flex-child에 적용하는 속성들입니다. 각 내용들은 다른 포스팅에서 다루도록 하고 액자 레이아웃에 집중해 보도록 하겠습니다.

 

✍️ flex-grow 이용

    .flex-child {
      flex-grow: 1;
    }

위와 같이 설정해주면 flex-item들이 사용가능한 공간을 1:1:...1 의 비율로 나누어서 자신들의 공간으로 만듭니다.

위에서 사용가능한 공간은 검은색 테두리 공간이고 flex-parent의 공간입니다. 이 부분을 저 셋의 자식들이 균등하게 나누어 가지게 됩니다.

그러면 위와 같이 균등하게 남은 공간을 나누어 가지게 됩니다. (contents2의 색깔은 보기 좋게 바꾸었습니다)

위에서 inline요소처럼 사이에 여백을 넣고 싶다면 부모에게 gap 속성을 적용시키면 됩니다.

 

❓flex-grow의 단점!?

단점이라기 보다는 flex-grow의 특성으로 인해 우리가 원하는 동작과 다를 수 있습니다. 

item의 요소가 동적으로 추가되는 프로젝트가 있다면 flex-grow를 쓰는 것은 정답이 아닐 수 있습니다. 위와 같이 콘텐츠의 양이 많아지면 부모의 너비를 contents들이 넘게 되는 일이 생깁니다.

 

📖하지만 이를 해결할 수 있는 방법이 있습니다. 

바로 flex-wrap을 부모에게 적용하면 줄바꿈이 이루어 집니다. 하지만 grow만 하면 너비가 지정되지는 않아 결국 Contents를 야무지게 채우고 나서야 줄바꿈을 합니다. 줄바꿈이 되었다고 해도 contents의 크기가 다릅니다. 저런 웹사이트가 있다면야 상관 없겠지만

 

❗그러지 않을 수도 있으니 flex-item들의 너비를 부여하는 방법을 고려해야 되겠습니다. ❗

 

✍️ flex-basis 이용

[곧 포스팅 예정]

 

 

✍️ flex-grow 와 flex-basis 이용

[곧 포스팅 예정]

 

✍️ width 이용 👉 안전하지만 유연하지 못함.

[곧 포스팅 예정]