[CSS] Flex box에 관한 내용 정리 (1) - Flex Container 속성

아래 코드를 보면서 display : flex에 대해 이해해보자.

 

부모 요소 : 노란색 박스인 flex_container를 Flex Container(플렉스 컨테이너)

자식 요소 : 초록색 박스인 container_item을 Flex Item(플렉스 아이템)

 

Flex Container가 Flex에 대해 전체 영향을 받는 공간이고 영향을 받는 공간 내 아이템들이 속성에 따라 배치 되는 것임

 

See the Pen Untitled by Hoon (@hoon_ceo) on CodePen.

이러면 CSS에서 설정해줄 수 있는 속성이 있는데, 이를 2가지로 확인이 가능함.

1. Flex Container에 적용되는 속성
2. Flex Item에 적용되는 속성

 

---

1. Flex Container에 적용되는 속성

1) Flex의 width와 height

Flex 아이템들은 가로로 배치되며

 

1-a) Width는 내용물의 크기에 영향을 받는다.

 

1-b) height는 Container 크기에 영향을 받는다.

 

 

2) flex-direction

.flex_container{
display : flex;
flex-direction : row;
flex-direction : column;
flex-direction : row-reverse;
flex-direction : column-reverse;
}

* column, row, row-reverse, column-reverse 가 있음

*default 값 : row

- 아래의 그림을 참고해볼 것

 

3) flex-wrap : 줄넘김

*default 값 : nowrap

.flex_container{
display : flex;
flex-direction : row;

/* Wrap 요소 */
flex-wrap : nowrap;
flex-wrap : wrap;
flex-wrap : wrap-reverse;
}

 

 

 

2) + 3) flex-flow : flex-direction 과 wrap 2개 동시에 바꾸는 것

* flex-direction flex-wrap 순으로 띄어쓰기로 한번에 적용 가능

.flex_container{
display : flex;

/* direction과 wrap 나눠적기 */
flex-direction : row;
flex-wrap : wrap;


/* flow로 2개 통합하기 */
flex-flow : row wrap;

}

 

 

4) Justify-content 와 align-items

a) Justify-content : Main-axis(가로축) 방향으로 정렬 

b) align-items : Main-axis(가로축) 의 수직방향으로 정렬 

 

4-a) justify-content 속성

- 각 속성은 배치이므로 직접 해보는 것이 좋음

.flex_container{
display : flex;

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

}

 

4-b) align-items 속성

- 각 속성은 배치이므로 직접 해보는 것이 좋음

.flex_container{
display : flex;

align-itmes : stretch;
align-itmes : flex-start;
align-itmes : flex-end;
align-itmes : center;
align-itmes : base-line;
}

5) align-content 속성

- 행간 정렬 

.flex_container{
display : flex;

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;
}

 

 

다음 포스팅에서는 flex - item에 대해 정리하겠습니다.