Flexbox란 무엇인가
대부분 사이트는 전체 레이아웃이 수직 구성이며 스크롤을 통해 움직인다.
레이아웃을 구성할 때 가장 많이 사용하는 요소(Elements)들이 기본적으로 블록(Block) 개념으로 표시(Display)되며 이는 뷰(View)에 수직(위에서 아래로)으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 만들 수 있다.
하지만 수평(왼쪽에서 오른쪽으로) 구성의 경우는 상황이 매우 귀찮다. 프론트엔드 개발을 진행해본적 있는 사람의 경우 무슨 소리인지 단번에 이해할 수 있을 것이다.
문제는 수평 구조를 만드는 속성이 명확하지 않았기 때문인데, 그래서 많은 경우
나 float 혹은 inline-block 등의 도움을 받았습니다.여기서 float 에 대해서 간략하게 짚고 넘어가보자. 말 그대로 둥둥 떠다니는 형태로 element들을 배치하는 것으로 이해하면 된다.
일반적으로 img 태그와 p 태그를 사용하게 되면 아래와 같은 결과가 나오게 된다.
하지만 그림과 문자를 수평으로 나열하기 위해
<img style="float:left" width="200px" height="200px" src="eagle.jpg" />와 같이 스타일을 적용한다면
와 같은 결론을 얻을 수 있다. 즉 사진과 문자가 수평으로 배치가 된다.
<img style="float:left" width="200px" height="200px" src="eagle.jpg" />
<div style="clear:both;"class="eagle">와 같은 형태로 아래 태그에 clear 효과를 준다면 아래와 같이 다시 원래 대로 수직 정렬이 진행된다.
위에서 설명한 float 을 이용해서 과거에는 수평정렬을 하곤 했다. 하지만 이는 다양한 문제(Clear, White space 등, 해결은 가능하지만..)를 가지고 있기 때문에 결국 수평 레이아웃 구성의 차선책일 뿐이며, 이제 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있다.
CSS3 Flexbox
Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공한다.
우선 Flex는 2개의 개념으로 나눌 수 있다. 첫 번째는 Container 두 번째는 Items 이다. Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수라고 할 수 있다.
Container에는 display, flex-flow, justify-content 등의 속성을 사용할 수 있으며,
Items에는 order, flex, align-self 등의 속성을 사용할 수 있다.
flex container
flex container 를 위한 속성들은 아래와 같다.
주 축(main-axis) 와 교차 축(Cross - axis)의 개념은 뒤에 다시 설명하겠다.
display
display 속성으로 Flex Continer를 정의내릴 수 있다.
display 를 block, inline-block, none 으로 종종 사용하는 경우가 많은데 이것을 flex, inline-flex 로 표현 할 수 있다.
flex 와 inline-flex 의 차이는 단순하다.
수직 또는 수평으로 쌓는 성향을 가진다고 보면 된다.
flex-flow
주 축을 설정하고 Items 의 여러 줄 묶음(줄바꿈) 을 설정하는 속성이다.
flex-direction 의 경우 아래 표를 보자.
주 축과 교차 축이란?
값 row 는 Items를 수평축으로 표시하므로 주 축이 수평이고 교차 축은 수직이 된다. 반대로 column 은 Items 를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 된다. 즉 방향에 따라 주 축과 교차 축이 달라진다고 보면 된다.
시작점과 끝점이란?
주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭한다. 아래 이미지를 참고하면 된다.
...to be continued...
//https://heropy.blog/2018/11/24/css-flexible-box/
