CSS Flexbox : Display 속성 (Flex, Inline-flex)

이번 시간부터는 최신트렌드인 Flexbox Layout에 대해 공부하고자 합니다. 그동안 Box와 Display 개념을 배우고 이미 알고 있기때문에 최근에 CSS3용으로 개발된 레이아웃 배치하는 Flexbox에 대해 공부를 한다면 CSS의 기본은 어느정도 알고 간단고 보면 됩니다.

 

Flexbox 레이아웃에는 Flex Containers 와 Flex Items 두가지 중요요소가 있습니다. Flex Containers의 모든 하위 항목은 Flex Items 입니다. 

 

지금부터 각 속성에 대해 하나씩 보도록 할게요. 그리고나서 간단한 홈페이지를 만들면서 연습해보고자 합니다. 이는 저에게도 도전이 될 것 같습니다. 

 

---

▒ display: flex

 

Flex Container는 화면 크기 변화에 대응하는 웹사이트를 만드는데 유용한 도구이며 모든 요소가 Flex Container가 될 수 있습니다.

 

그러기 위해서는 Display의 속성값을 Flex로 바꾸어야 합니다. 

 

다음 예를 가지고 한번 진행해 보죠. (Codecademy에서 예제를 빌려왔습니다. )

일단 HTML 내역은 블록을 위 3개, 아래 3개를 만들겁니다. Flexbox와 그냥 Box의 개념을 살펴볼겁니다. 

 

각 class명 container 색은 Whitesmoke로 하고 Box의 색은 Dodgerblue로 표시해서 CSS 코딩을 다음과 같이 하겠습니다. 

 

 

 

그럼 웹페이지에는 다음과 같이 나옵니다. 

 

 

 

자 이제부터 Flexbox의 속성에 대해 하나씩 적용해 봅니다. 

 

우선 id값이 "flex" 에 display: flex 라는 속성을 적용해 봅니다. 그럼 flexbox 속성이 적용되어 inline 형태로 바뀌게 됩니다. 

 

 

브라우저의 모양은 다음과 같이 inline 블록형태로 바뀝니다. 

 

 

위 그림에서 Whitesmoke의 container의 너비가 지정이 되지 않았기때문에 브라우저 끝까지 영역이 표시됩니다. 

 

 

---

 

▒ display: inline-flex

 

그럼 블록형태로 되어 있는 6개의 Box형태를 inline-flex 속성값을 주면 어떤 변화가 나타나는지 확인해 볼게요.

 

다음과 같이 HTML 코드를 만들어 봅니다. 

 

 

CSS 내역에서 이번에는 class명 container의 너비를 지정해주고 class명 box도 너비와 높이를 정사각형으로 만들어 보겠습니다. 

 

 

 

브라우저에는 다음과 같이 표시되겠죠.

 

 

 

class명 container에 display 속성값으로 inline-flex를 적용해 보겠습니다. 이는 class명 box보다 상위 class입니다. 상위 class에 적용하면 하위 class(child값)에 영향을 받습니다. 

 

 

 

그러면 브라우저에는 다음과 같이 6개의 box가 in-line으로 나옵니다. 

 

 

상기 브라우저를 좀 더 분석해 보겠습니다. 

 

상위 class명 container의 너비는 200px이었고 하위 class명 box의 너비는 100px이었습니다. container의 200px안에 3개의 box가 inline으로 배치가 되고 그 너비는 200px안에서 형성이 되는 형상입니다. 

 

개발자코드(F12)로 한번 box 한개의 너비를 보겠습니다. 

 

 

한개의 box 너비는 64.671이고 한 container안에 3개의 box가 있으니 64.671 X 3 = 194.013 입니다. 즉 200px안에 3개의 box가 flexible하게 배치가 되었습니다. 

 

다시말해서 inline-flex 속성값은 상위 class 영역내에서 flexible(유동성있게)하게 형성되는 속성이 있습니다. 

 

좀 더 알아보기 쉽게 container의 색을 노란색으로 하고 너비를 400px로 넓혀 보겠습니다. 

 

CSS 코드를 다음과 같이 해보죠.

 

 

그럼 box의 너비가 100px이기때문에 inline-flex를 시켜도 충분히 3개의 box가 들어가고 container의 영역이 남는 것을 볼 수 있습니다. 다음 브라우저를 참조하세요.

 

 

 

앞으로 천천히 몇개씩 Flexbox의 속성에 대해 공부해 나가도록 하겠습니다.