[반응형 웹 디자인]플렉서블 박스 기본 개념 이해하기.

플렉서블 박스란? 이미 해외의 유명 웹 기술 잡지인 'W.E.B'에서 최고 신기술상을 수상하기도 했으며, 새로운 웹 기술 중 가장 주목을 받고 있는 기술

플렉서블 박스 기술이 등장하기 전까지는 박스의 배치 순서를 바꾸는 게 불가능했음.

하지만 플렉서블 박스의 특정 속성값을 중앙으로만 설정하면 박스들을 중앙으로 배치할 수 있으며, 여러 개의 박스가 나란히 있을 때는 가장 높은 크기의 박스에 맞춰 모든 박스의 높이를 확장하는 등 유연하게 작동하는 박스를 간단히 만들 수 있음.

요즘처럼 복잡한 구조의 반응형 웹 사이트를 제작 하기에는 최적의 기술 중 하나로 손꼽히고 있음.

플렉서블 박스 = 부모 박스

플랙서블 박스에는 부모 박스는 가변적인 박스로 작동하기 위한 기본 개념

마치 wrap처럼 모든 요소를 감싸고 있는 존재이기도 함.

이 부모 박스에 플렉서블 박스에서 새로 생긴 특정 속성값을 적용해야 가변적인 박스로 작동하게 됨.

이렇게 특정 속성값을 적용한 부모 박스를 '플렉서블 박스' 또는 '플렉서블 박스로 작동한다' 라고 함.

플렉스 아이템

앞에서 설명한 부모 박스가 플렉서블 박스로 작동한 순간부터

그 안의 자식 박스들은 '플레스 아이템'이라는 이름을 달고 작동하게 됨.

부모 박스가 속성값이 적용되어 가변적인 박스로 작동하는 순간부터 플렉서블 박스로 불리듯이 자식 박스 역시 속성값에 의해 작동하는 순간부터 플렉스 아이템이라고 불리게 됨.

축의 시작과 끝

축에는 시작과 끝이 있음.

축에 시작과 끝이 존재하는 이유는 플렉스 아이템이 처음 배치되는 위치(시작점)와 플렉스 아이템이 마지막에 배치될 위치(끝점)가 필요하기 때문이다.

만약 시작과 끝이 없다면 플렉스 아이템은 어디서부터 배치되어야 하고 어디까지 배치되어야 할지 몰라 박스가 제멋대로 배치될 수 있음.

플렉서블 박스의 크기와 축의 방향이 결정될 때 축의 시작과 끝도 함께 결정됩니다.