CSS Flex 기초

flex는 요소를 포함하는 부모에게 적용하는 속성과 자식에게 적용하는 속성으로 나뉜다.

 

 

 

 

[flex 컨테이너 부모에게 적용되는 속성]

 

display를 flex로 지정하면 플렉스 방식으로 자식 요소들을 배치하게 됨

 

 

flex-direction에 따라 안에 있는 내용들의 정렬하는 축이 달라진다. 

 

- flex-direction : row   세로 정렬(왼쪽에서 오른쪽으로)

- flex-direction : column   가로 정렬 (위에서 아래로)

- flex-direction : row-reverse  세로 정렬(오른쪽에서 왼쪽으로)

- flex-direction : column   가로 정렬(아래에서 위로)

 

위의 값에 따라 justify-content, align-items, align-content등의 속성들이 작용할 방향이 결정됨

 

 

 

flex-wrap은 내부 요소의 개수 X 길이가 컨테이너를 넘어갈 때 이들을 여러 줄에 걸쳐 나열할지 여부를 정함

 

 

 

justify-content는 메인 축에서 아이템들을 정렬할 방식을 정함

 

- justify-content : flex-start : direction에서 설정했던 시작방향부터 나열됨

- justify-content : center : 가운데 정렬

- justify-content: flex-end: flex-start와 다르게, 끝으로 온다.

- justify-content : space-between : 양쪽 요소를 끝으로 보내고, 가운데에 동일하게 스페이스를 넣어준다.

- justify-content: space-around : 각 요소의 양쪽에 공간을 넣어준다.

- justify-content : space-evenly : 양 끝과, 요소들 사이에 똑같은 크기의 공간을 넣어준다.

 

flex-start(end)는 row(column)-reverse의 영향을 받는다는 점에서 start(end)와 다르다.   되도록 flex- 가 붙은 것을 사용

 

 

 

align-item은 수직 축(메인 축의 반대)에서 아이템들을 정렬할 방식을 정한다.

예를 들어 flex-direction이 row면 column방향에서 정렬할 방식을 정하는 것이다.

 

wrap으로 아이템이 여러 줄이 되면 align-content를 사용해서, 보다 다양한 방식으로 정렬할 수 있음

 

align-item은 container안에서 전체 item의 배치를 어떻게 할 것이냐에 대한 속성 

align-content는 item의 줄간격을 어떻게 배치할 것이냐에 대한 속성

 

 

 

gap 속성은 아이템 간 간격을 줄 수 있으며, 두 개의 값을 넣어서 가로 간격, 세로 간격을 다르게 지정하는 것도 가능

 

 

 

 

[flex 컨테이너 안 자식에게 적용되는 속성]

 

 

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

 

 

 

flex-grow는 빈 공간을 채울지 여부, 채울 시 다른 아이템들의 이동 속성값에 비례해서 공백을 나눠가짐. (기본값은 0)

숫자에 비례해서 공간을 나눠가진다.

 

ex) 1번에 flex-grow : 1을 주고 2번에 flex-grow : 2를 적용하면 1:2 비율로 빈 공간을 채움

 

 

 

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

 

ex) flex-shrink : 0 이면 너비를 나눠줄 생각이 없다는 뜻이다.

 

 

 

flex-grow는 공간이 넉넉한 상황에서 얼마나 공간을 더 가져갈지를 정하는 속성

flex-shrink는 공간이 부족한 상황에서 얼마나 더 나눠줄지를 정하는 속성