Treejin's Note

프론트엔드 개발을 하면서 가장 고민이 되는 부분은 레이아웃적인 부분이다.

어떤 배치가 보기 좋고 사용하기 편할까를 고려하면서 레이아웃을 배치해야 한다.

최근 가장 많이 사용하게 된 CSS의 속성은 Flex이다. 

아래 포스팅이 너무너무너무 x 100 잘 정리되어 있어서 자주 참고하고는 하는데, 이제는 들어가서 찾지 않고 머리에 집어넣기 위해 블로그를 통해 스스로 정리하고자 한다.

컨테이너에 적용하는 속성

display

display:flex;
display:inline-flex;

display의 flex로 아이템들은 자신의 내용물만큼의 width를 가지게 된다.(마치 inline처럼)

아이템들의 height는 컨테이너의 높이만큼 늘어난다.

inline-flex는 컨테이너가 주변 요소와 어우러지는 방식을 결정한다.

flex-direction

flex-direction:row;
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;

flex-direction은 아이템들의 배치 방식을 결정한다.

• row는 가로 배치, column은 세로배치이다.
• reverse는 역순으로 배치시키며 시작하는 위치를 반대편으로 한다.(row는 왼쪽 정렬, row-reverse는 오른쪽 정렬)

flex-wrap

flex-wrap:nowrap;
flex-wrap:wrap;
flex-wrap:wrap-reverse;

flex-wrap은 아이템들의 배치가 컨테이너를 넘을 경우의 처리 방식을 결정한다.

• nowrap : 컨테이너를 넘어도 줄바꿈 없이 배치를 유지한다.
• wrap : 컨테이너를 넘으면 줄바꿈을 한다.
• wrap-reverse : 컨테이너를 넘으면 줄바꿈을 하는데, 윗 방향으로 한다.

flex-flow

flex-flow: row wrap;
/* flex-direction flex-wrap */

flex-flow는 flex-direction과 flex-wrap을 한번에 지정할 수 있는 속성이다.

justify-content

justify는 메인축, align은 메인축의 수직축을 나타낸다!

justify-content:flex-start;
justify-content:flex-end;
justify-content:center;
justify-content:space-between;
justify-content:space-around;
justify-content:space-evenly;

justify-content는 메인축 방향(row면 가로방향, column이면 세로방향)으로 아이템을 정렬하는 속성이다.

• flex-start : 시작점으로 정렬
• flex-end : 끝점으로 정렬
• center : 가운데로 정렬
• space-between : 아이템들의 사이에 균일한 간격 생성(양 끝 제외)
• space-around : 아이템들의 둘레에 균일한 간격 생성
• space-evenly : 아이템들의 사이와 양 끝에 균일한 간격 생성(IE에서 지원 X)

align-items

align-items:stretch;
align-items:flex-start;
align-items:flex-end;
align-items:center;
align-items:baseline;

align-items는 메인축의 수직방향(row면 세로방향, column이면 가로방향)으로 아이템을 정렬하는 속성이다.

• stretch : 컨테이너의 수직 길이만큼 전부 늘림
• flex-start : 컨테이너의 시작점으로 정렬
• flex-end : 컨테이너의 끝점으로 정렬
• center : 컨테이너의 가운데로 정렬
• baseline : 텍스트 베이스라인 기준으로 정렬

align-content

align-content:stretch;
align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-between;
align-content:space-around;
align-content:space-evenly;

align-content는 flex-wrap:wrap;이 설정된 상태에서 아이템의 행이 두 줄 이상일 때 수직축 방향 정렬을 결정하는 속성이다.

해당 속성들은 justify-content의 내용과 동일하다.

아이템에 적용하는 속성

flex-basis

flex-basis는 flex아이템의 기본 크기를 설정하는 속성이다.(row일 때는 너비, column일 때는 높이)

아이템의 내용이 flex-basis로 설정한 크기보다 크다면 내용의 크기만큼, 작다면 flex-basis의 크기만큼 flex-basis값이 지정된다.

flex-grow

flex-grow는 아이템이 flex-basis보다 커질 수 있는지를 결정하는 속성이다.

기본값은 0이고, 1보다 크게 되면 유연한(flexible) 박스로 변하면서 빈 공간을 메운다.

flex-grow에 들어가는 숫자는 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 분배한다.

flex-shrink

flex-shrink는 flex-grow의 반대 속성으로, flex-basis보다 작아질 수 있는지를 결정하는 속성이다.

flex-shrink의 기본 값은 1이다.

0으로 지정하면 아이템은 flex-basis보다 작아질 수 없다.

0보다 큰 값으로 지정하면 flex-basis보다 작아질 수 있다.

=> 컨테이너의 크기보다 아이템들의 크기의 합이 클 때, flex-shrink의 값이 0으로 지정된 아이템은 flex-basis의 크기가 보장되지만, flex-shrink가 0보다 큰 값이면 flex-basis의 값이 보장되지 않는다.

flex

flex: 1;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 1 1 auto;
/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
flex: 1 500px;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */

flex는 flex-grow, flex-shrink, flex-basis를 한 번에 설정하는 축약형 속성이다.

align-self

align-self:auto;
align-self:stretch;
align-self:flex-start;
align-self:flex-end;
align-self:center;
align-self:baseline;

align-self는 수직축으로 정렬을 수행한다.

align-self는 컨테이너의 align-items보다 우선순위가 높다.

order

order는 각 아이템들의 시각적 나열 순서를 결정하는 속성이다.

HTML자체의 구조를 바꾸는 것은 아니다.