*** Flex(Flexible Box, Flexbox) 속성
- 아이템들을 가로 방향으로 배치
- 내용물만큼 width적용(=inline)
- 아이템들의 height가 모두 컨테이너의 높이만큼으로 자동 적용
- (float는 각각의 콘텐츠만큼 높이 설정)
*display: flex
element / #id / .class {
display: flex;
/* display: inline-flex */
}
* Flex Container(플렉스 컨테이너)
1. Flex의 영향을 받는 전체 공간
* Flex Item(플렉스 아이템)
1. 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것
<div class="container">
<div class="item">hellowFlex</div>
<div class="item">abc</div>
<div class="item">hellowFlex</div>
</div>
** Flex 컨테이너 속성
* flex-direction : 배치 방향 설정
- row : 왼쪽부터 순차적 배치
- row-reverse : 오른쪽부터 순차적 배치
- column : 위에서 아래로 순차적 배치
- column-reverse : 아래에서 위로 순차적 배치
* flex-wrap : 줄넘김 처리 설정
- 아이템 줄바꿈 속성
- nowrap : 줄바꿈을 하지 않음
- wrap : 줄바꿈
- wrap-reverse : 역순으로 배치 후 줄바꿈
* flew-flow = flex-direction + flex-wrap
element / #id / .class {
flex-flow : row wrap;
/* flex-direction : row */
/* flex-wrap : wrap */
}
1. flex-direction과 flex-wrap을 한번에 지정
2. flex-direction, flex-wrap의 순으로 공백으로 구분
* 아이템 정렬
- justify : 수평축 정렬
- align : 수직축 정렬
* justify-content : 메인축 방향 정렬
- 수평축 방향으로 아이템 정렬
1. flex-start(기본값): 아이템들을 시작점으로 정렬
-flex-direction : row(왼쪽), column(위)
2. flex-end : 아이템들을 끝점으로 ㅈ어렬
- flex-direction : row(오른쪽), column(아래)
3. center : 아이템들을 가운데로 정렬
4. space-between : 아이템들 사이에 균일한 간격 생성
5. space-around : 각 아이템의 좌우에 균일한 간격 생성
6. space-evenly : 아이템들의 사이와 양 끝에 균일한 간격 생성
* align-items : 수직축 방향 정렬
- 수직축 방향으로 아이템 정렬
1.stretch(기본값) : 아이템들을 위아래 방향으로 끝까지 늘림
2. flex-start : 아이템들을 위쪽으로 정렬
- flex-direction : column인 경우
3. flex-end : 아이템들을 아래쪽으로 정렬
- flex-direction : column인경우
4. center : 아이템들을 중간 정렬
5. baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬
** 아이템 가운데 (수평)(수직) 정렬
element / #id / .class {
justify-contents : center;
align-items : center;
}
* align-content : 여러 행 정렬
- flex-wrap : wrap이 설정된 상태에서 아이템들의 행이 2줄 이상인 경우 수직축 방향 정렬 지정
- stretch
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
* align-self
- align-items로 교차축(cross axis)아이템 정렬
- align-items 속성보다 우선 적용
- 콘테이너 안의 모든 아이템에 적용
- 특정 아이템의 정렬을 따로 정할 경우 align-self 속성 사용
- 기본값은 auto로 align-items속성의 값을 상속
1. auto
- 부모 ㅁ컨테이너의 align-itmes 속성을 상속받음
- 부모 컨테이너가 없는 경우 stretch 적용
2.stretch : 컨테이너에 맞게 변경
3.center : 컨테이너 중심에 위치
4.flex-start : 컨테이너 앞단 부분에 위치
5.flex-end : 컨테이너 끝단 부분에 위치
6.baseline : 컨테이너의 기본선에 위치
7. initial : 이 속성의 기본값으로 설정
8. inherit : 부모 요소의 속성값 상속
** Reset CSS
태그들이 가지고 있는 기본 속성과 값을 코딩하기 편한 값으로 변경
