A Complete Guide to Flexbox

배경

그 Flexbox Layout(유연한 박스) 모듈(현재 W3C 최종작업본) 은 늘여놓기 위한 보다 효과적인 방법을 제공하는 것을 목표로 한다. 일직선상으로 정렬되고 한 컨테이너 안의 항목들 사이에 공간을 분배하는 것에 대해. 그것들의 크기가 알려지지않았거나 동적일지라도. (그리하여 단어 “flex”다.)

플렉스 레이아웃의 이면에 중심적인 생각은 컨테이너에 주기 위함이다. 그것의 항목들의 최적의 높이와 너비(그리고 순서)로 고치기 위한 능력은 이용가능한 공간을 채우는 것을. (대부분 모든 종류의 디스플레이 장치와 스크린 크기에 대해 조절하기 위한). 플렉스 컨테이너는 이용가능한 자유로운 공간으로 채우거나 넘치는 것을 예방하기 위해 그것들을 줄이기 위한 항목으로 확장한다.

가장 중요한 것으로는, 그 플렉스박스 레이아웃은 규칙적인 레이아웃들에 적대적인것 같이 인지불능의 방향이다. (수직기반의 블록과 수평기반의 인라인). 그것들이 페이지를 위해 잘 동작하는 동안, 그들은 크거나 복잡한 어플리케이션을 받치기 위한 유연성이 부족하다. (특히 방향성 변화나 크기조절, 펴거나 줄어드는 등등을 해야할때 )

노트: 플렉스 박스 레이아웃은 대부분 어플리케이션의 구성요소들에 적합하다. 그리고 작은 범위의 레이아웃이나 그리드 레이아웃이 거대한 규모의 레이아웃들 위해 의도되어지는 동안.

기초 용어

플렉스박스가 단일 속성이 아니라 전체 모듈된 후로 그것은 그 전체 속성의 집합을 포함시키는 많은 것들을 필요로 했다. 다른 것들이 자식(플렉스 아이템이라 불리는)에 놓여지는 것으로 의미되어지는 것에 반해 그것들의 일부는 컨테이너(부모 앨리먼트, 플렉스 컨테이너로 알려진)에 놓여 지는 것으로 의미되어졌다.

만약 규칙적인 레이아웃이 양 블록과 직렬상의 방향에 기반이 된다면, 플렉스 레이아웃은 유연한 방향에 기반이 된다. 플렉스 레이아웃에 대해 설명하는 세부사항의 모습을 봐줘.

플렉스 레이아웃

기본적으로, 항목들은 main axis(main-start에서 main-end)나 cross axis(cross-start에서 cross-end) 둘 중 하나로 놓여질거다.

main axis - 플렉스 컨테이너의 main axis은 플렉스 항목들이 놓여지는 가장 중요한 축이다. 조심해라, 그것은 반드시 수평은 아니다. 그것은 flex-direction 속성에 결정된다.
main-start main-end - flex 항목들은 main-start로 부터 시작되고 main-end로 가는 컨테이너 안에 위치한다.
main size - 플렉스 항목들의 너비와 높이는 main의 범위에 어느 곳이든 항목의 main size이다. 플렉스 항목들의 main size 속성은 ‘너비’나 ‘높이’ 속성 둘 중 하나다. main 범위에 있는 어느곳이든.
cross axis - main axis에서 수직축이라 불린다. 그것의 방향은 main axis 방향에 따라 결정된다.