CSS 속성 알아보기 (정렬)

 

Flex Container 와 Flex Items 개념

 

Flex Container - display: flex가 들어있는 요소

Flex Items - Flex Container의 자식 요소

 

이미지 참조 - https://heropy.blog/2018/11/24/css-flexible-box/

 

Flex Container - 부모 요소에 작성

 

display: flex;

 

display: flex;
display: inline-flex;


/* display: 값 - 요소의 화면 출력(보여짐) 특성을 지정하는 속성 */

Flex Container의 화면 출력 특성을 지정하는 속성

 

flex - 블록 요소와 같이 Flex Container 정의

inline-flex - 인라인 요소와 같이 Flex Container 정의

 

flex-direction

 

flex-direction: 값;

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;          /* 열 축 (위 -> 아래), 수직 */
flex-direction: column-reverse;  /* 열 축 (아래 -> 위), 수직 */

Container의 주 축(Main-Axis)을 설정하는 속성 (수평, 수직 정렬)

 

기본값(row) - 행 축 (좌 -> 우), 수평

row-reverse - 행 축 (우 -> 좌), 수평

 

flex-wrap

 

flex-wrap: 값;

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse; /* wrap의 반대 방향으로 묶음 */

Flex Items 묶음(줄 바꿈) 여부

 

기본값(nowrap) - 묶음(줄 바꿈) 없음

wrap - 여러 줄로 묶음

 

justify-content

 

justify-content: 값;

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between; /* 각 Flex Item 사이를 균등하게 정렬 */
justify-content: space-around; /* 각 Flex Item의 외부 여백을 균등하게 정렬 */

주 축의 정렬 방법

 

기본값(flex-start) - Flex Items를 시작점으로 정렬

flex-end - Flex Items를 끝점으로 정렬

center - Flex Items를 가운데 정렬

 

align-content

 

align-content: 값;

align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between; /* 각 Flex Item 사이를 균등하게 정렬 */
align-content: space-around; /* 각 Flex Item의 외부 여백을 균등하게 정렬 */

교차 축(Cross Axis)의 여러 줄 정렬 방법

 

기본값(stretch) - Flex Items를 시작점으로 일정하도록 정렬

flex-start - Flex Items를 시작점으로 정렬

flex-end - Flex Items를 끝점으로 정렬

center - Flex Items를 가운데 정렬

 

이미지 참조 - https://yongbeomkim.github.io/css/css-flexible-box/

 

align-items

 

align-items: 값;

align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline; /* Flex Items를 각 줄의 문자 기준선에 정렬 */

교차 축의 한 줄 정렬 방법

 

기본값(stretch) - Flex Items를 교차 축으로 늘림

flex-start - Flex Items를 각 줄의 시작점으로 정렬

flex-end - Flex Items를 각 줄의 끝점으로 정렬

center - Flex Items를 각 줄의 가운데 정렬

 

이미지 참조 - https://yongbeomkim.github.io/css/css-flexible-box/

 

Flex Items - Flex Container의 자식 요소에 작성

 

order

 

order: 값;

order: 1;

Flex Item의 순서를 지정하는 속성

 

기본값(0) - 순서 없음

숫자 - 숫자가 작을수록 먼저

 

flex-grow

 

flex-grow: 값;

flex-grow: 1;

Flex Item의 증가 너비 비율을 지정하는 속성, 요소가 차지하는 영역을 제외한 나머지 영역을 비율로 나눠서 차지함

 

기본값(0) - 증가 비율 없음

숫자 - 증가 비율

 

flex-shrink

 

flex-shrink: 값;

flex-shrink: 2;

Flex Item의 감소 너비 비율을 지정하는 속성

 

기본값(1) -  Flex Container 너비에 따라 감소 비율 적용

숫자 - 감소 비율

 

flex-basis

 

flex-basis: 값;

flex-basis: auto;
flex-basis: 0;
flex-basis: 3px;

Flex Item의 공간 배분 전 기본 너비를 지정하는 속성

 

기본값(auto) - 요소의 Content 너비

단위 - px, em, rem 등 단위로 지정