[CSS] flex box 정리

CSS3 Flexible Box 

[배경] 

오랫동안 CSS 레이아웃을 작성할 수 있는 신뢰할 수 있는 크로스 브라우저 호환 도구로 float, position 속성을 사용하였다. 무난하지만 어떤 점에서는 제한적이라 확실히 단점이 있습니다.

예를 들어, 아래와 같은 요구 사항을 달성하기 어렵거나 불가능합니다. 

[float, position이 구현 불가능한 요구 사항]

• 부모 요소 내부에 포함된 블록 컨텐츠를 세로로 중심부에 맞추기 
• 사용 가능한 너비와 높이에 관계없이 하나의 컨테이너에 포함된 모든 자녀 요소가 주어진 비와 높이를 똑같은 크기로 점유
• 다단 레이아웃에 포함된 모든 단이 서로 다른 크기의 콘텐츠를 포함하고 있더라도 동일한 높이로 채택

flexbox는 위와 같은 문제를 해결하고 레이아웃을 만드는데 편의성을 제공하기 위해 탄생했습니다. 

 

flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되어 있습니다. -> 레이아웃을 다룰 때, 한 번에 하나의 차원(행이나 열)만 다룬다는 뜻입니다. 이는 행과 열을 함께 조절하는 CSS 그리드 레이아웃의 2차원 모델과는 대조됩니다. 

 

사용 시 flexbox로 레이아웃할 요소를 지정해야하는데 효과를 주고 싶은 요소에 display:flex; 를 주는 것이 아니라 그 요소의 부모에 해당 값을 지정해야 합니다. 이렇게 지정된 부모요소를 flex container 라고 합니다. 

참고: 인라인 항목을 flexbox로 취급하여 레이아웃하고 싶다면 display 속성 값을 inline-flex로 지정할 수 있습니다. 

레이아웃 시 상자들은 두 개의 축을 따라 배치됩니다. 

1. 기본 축(main axis) - flex item이 배치되고 있는 방향으로 진행하는 축입니다. 

2. 교차 축(cross axis) - flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. (해당 축의 시작과 끝을 cross start, cross end라고 합니다)

 

행 또는 열? 

flexbox는 기본 축이 진행되는 방향(자식 flexbox)들이 컨테이너 내부에 배치되는 방향)을 지정하는 flex-direction 속성을 제공한다. 기본값으로 row로 설정되어 있으며 브라우저의 기본 언어가 작동하는 방향(e.g. Eng 브라우저의 경우, 왼 -> 오 방향)을 따라 일렬로 배치된다. 

flex-direction: column; // 기본값이 row이기 때문에 main axis의 방향을 바꾸고 싶다면 column으로 직접 지정해주면 된다. 외에도 row-reverse 와 column-reverse 속성값을 사용해서 역방향으로 배치가 가능하다. 

대열에서 이탈된 요소가 소속 컨테이너에서 이탈하는 경우 부모 컨테이너에 아래와 같은 속성을 주면 아래의 행으로 자녀들이 알맞게 맞춰지게 됩니다. 즉, 대열이탈된 것들은 다음 행으로 넘어가는 것이지요. 

flex-wrap: wrap; // 크기를 넘어가는 아이들은 다음 행으로 넘겨주세요.
flex: 200px; // 부모요소에 지정되는 속성으로 해당 의미는 각 자식 요소에 적어도 200px너비가 지정되었다는 의미

flex-direction과 flex-wrap 두 요소를 합쳐  flex-flow로 대체할 수 있습니다.

flex-direction: row;
flex-wrap: wrap;
///대체 
flex-flow: row wrap;

 flex-item의 flex크기 조정

부모요소가 section 태그이고 flex-item이 article태그라고 했을 때, 

article {
  flex: 1;
}

라는 속성을 제공한다면 flex item이 기본 축을 따라 남은 공간을 어느 정도나 점유할지 결정하는 단위가 없는 비율 값입니다. 여기서 우리는 각 item이 이는 패팅과 여백이 지정된 이후 남은 여분의 공간을 모두 동등한 크기로 점유하게 된다는 의미입니다. 

아래의 규칙을 추가하면 세번째 article이 다른 두 개보다 사용가능한 너비의 두 배나 많이 점유한다는 것을 알 수 있습니다. 말하자면 총 4개의 비례 단위가 있는 것이지요. (3개의 article 태그가 있을 때, 마지막 3번째 요소가 2배를 점유하고 있으니 2/4를 차지하고 있는 것이겠지요)

article:nth-of-type(3) {
  flex: 2;
}

또한 flex 값 내에서 최소 크기 값을 지정할 수 있습니다.

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

flex item은 먼저 사용가능한 공간에서 200px를 부여받고 나머지 사용 가능한 공간은 비례 단위에 따라 분배됩니다. 

 

🙋‍♂️ flexbox의 실제 값은 flex성/반응성에 포함되어 있다고 볼 수 있습니다. 다시 말해 브라우저의 창의 크기를 재조정하거나 다른 article 요소를 추가하더라도 레이아웃이 정상적으로 작동합니다.

 

flex 속성(속성 값아님)?

위에서 사용한 flex 속성은 최대 3가지의 서로 다른 값을 지정할 수 있는 약칭 속성인데요.

 

단위없는 비례 값을 flex-grow 라는 정식 명칭 속성을 사용하여 개별적으로 지정이 가능합니다. 

flex-shrink는 flex item이 컨테이너 범주에서 넘어갔을 때 대열 이탈을 방지하기 위해 넘치는 양을 각 flex item의 크기에서 어느 정도나 뺏어올지를 지정합니다. (고수준의 flex box기능이라 따로 찾아보시면 좋습니다.)

최소 크기 값을 나타내는 flex-basis라는 정식 명칭 값을 사용하여 개별적으로 지정될 수 있습니다. 

 

즉, flex는 flex-grow/ flex-shrink/ flex-basis 세 가지 요소의 shortcut 정도로 생각하시면 됩니다. 

 

 

사용시 주의사항이 있다면, 크로스 브라우징 이슈가 있을 수 있습니다. 신형 브라우저에서는 대부분 flexbox을 제공하지만 flexbox를 지원하지 않는 또는 지원하지만 실제로 구식 버전의 flexbox를 지원하는 구형 브라우저 사용자를 고려해야합니다. 예를 들어 CSS 그림자 기능이 브라우저에서 빠진 경우 해당 사이트를 여전히 사용할 수 있으나 flexbox 기능을 지원하지 않을 경우 레이아웃이 완전히 깨져서 사용할 수 없게 됩니다. 

 

flex 크로스 브라우징 이슈 해결방안: https://velog.io/@nemo/css-flex-support

[CSS] 최신 flex 호환성 이슈 해결 방법

https://webclub.tistory.com/604

CSS Flex 이슈와 그에 대한 해결책

 

 

저는 MDN docs를 통해 정리하였지만 훨씬 더 깔끔하고 정리정돈된 자세한 자료를 보고 싶다면

아래의 자료를 참고하시는 것을 추천드립니다. 

 

참고하면 좋은 사이트: https://heropy.blog/2018/11/24/css-flexible-box/

CSS Flex(Flexible Box) 완벽 가이드

 

 

Q. flex란 무엇이며 사용시 유의사항이 있다면 무엇일까요? 에 대한 대답

flex란 flexbox 레이아웃을 구현하기 위해 사용하는 CSS의 display 속성 중 하나입니다.  
레이아웃, 정렬, 간격 설정하는 데에 효과적이며 다루고자 하는 아이템들의 사이즈를 모르거나크기가 유동적이여야하는 상황에서 유용하게 사용됩니다. 

또한 수평적으로만 배치되는 것이 원칙인 일반적인 레이아웃과 달리 flexbox레이아웃은  
방향에 대해 유연합니다. Flex는 작은 크기의 레이아웃이나 모바일 디바이스에 적합하며, 큰 스케일의  레이아웃을 원한다면 Grid속성을 사용하는 것이 좋습니다. 

주의사항이 있다면 크로스 브라우징 이슈가 있어, 구버전의 브라우저에서 동작하지 않는 flexbox 
속성이 있으므로 유의해야 합니다. 

---

flexBox layout 10가지 좋은 자료 Naver D2 flexBox

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