flex 레이아웃

웹 사이트의 구조를 영리하게 짤 수 있다.

display: flex / (inline-flex)

display를 flex로 지정하면 플렉스 방식으로 자식 요소들을 배치하게 된다.
inline-flex는 해당 컨테니어 요소를 인라인으로 만든다는 차이가 있다.

부모요소에 적용되는 flex레이아웃

display: flex-direction

flex-direction의 값

row(가로로 왼쪽부터)
column(세로로 위부터)
row-reverse(가로로 오른쪽부터)
column-reverse(세로로 아래부터)

내부 요소(아이템)들을 위의 값에 따라 justify-content, align-items, align-content 등의 속성들이 작용할 방향이 결정된다.

justify-content 속성

justify-content는 메인 축에서 아이템들을 정렬할 방식을 정한다.
값은 인터넷 검색, 찾아서 써보기~

flex-start(end)는 row(column)-reverse의 영향을 받는다는 점에서 start(end)와 다르다. flex-가 붙은 것을 사용해야 한다. (display: flex 속성의 영향권에 속하지 않기 때문이다.)

flex-wrap 속성

flex-wrap은 내부 요소의 갯수 X 길이가 컨테이너를 넘어갈 때 이들을
여러 줄에 걸쳐 나열할지 여부를 정한다. 기본적으로는 nowrap으로 설정되어있다.

align-itmes 속성

align-items는 수직 축(메인 축의 반대)에서 아이템들을 정렬할 방식을
정한다. wrap으로 아이템이 여러 줄이 되면 align-content를
사용해서 보다 다양한 방식으로 정렬할 수 있다.
값은 인터넷 검색, 찾아서 써보기~

align-content 속성

align-content는 아이템 전체를 구분없이 한꺼번에 정렬하는 속성이다.
align-items는 줄을 구분하여 전체를 정렬하는 속성이므로 차이가 잇다.

align-gap 속성

align-gap 속성으로는 아이템간에 간격을 줄 수 있으며 두 개의 값을 넣어서
가로 간격과 세로 간격을 다르게 지정하는 것도 가능하다. ex)1em, 1em 0 등

자식(flex 컨테이너 안)에 적용되는 속성

flex-basis

flex-basis는 메인 축상의 길이로, 컨테이너의 flex-direction 값에 따라 너비 또는 높이값으로 작용한다. 기본값은 auto이다.

flex-grow

flex-grow는 빈 공간을 채울지에 대한 여부이기도 하고, 채울 시 다른 아이템들의 동 속성값에 비례해서 공백을 나눠갖는다. 기본값은 0.

flex-shrink

flex-shrink 속성은 전체 공간이 부족할 때, 해당 아이템의 길이가 컨텐츠의 너비 또는 flex-basis로 지정한 값보다 작아질 수 있을지를 지정한다. 기본값은 1이며, 증가할수록 길이가 많이 줄어든다.

flex-grow VS flex-shrink

flex-grow는 얼마나 더 공간을 가져갈지를 정하는 것이라면, flex-shrink는 공간이 부족한 상태에서 얼마나 더 나눠줄지를 정하는 것이다.

위 속성들은 아래와 같이 flex 속성으로 한 줄에 나타낼 수 있다.

flex: (flex-grow 값);
flex: (flex-grow 값) (flex-basis 값);
flex: (flex-grow 값) (flex-shrink 값) (flex-basis 값);

order 속성

플렉스 컨테이너의 아이템들은 order 속성을 사용해서 순서를 임의로 변경할 수 있다.
숫자가 특정되어 있지 않다면 (기본값 0) 코드에 작성된 순서대로 나열된다.