1. Flex container 적용 속성
1) display
flex- 컨테이너 내부 flex 아이템들을 가로 방향으로 배치
- Flex 아이템들은 자신이 가진 내용물의 width, 컨테이너의 height 만큼 차지
inline-flex- 컨테이너가 주변 요소들과 어떻게 어우러질지 경정
- 컨테이너가 inline-block 처럼 동작 - 컨테이너의 width 가 내용물의 width 로 조정
2) flex-direction : flex item 배치 방향 설정
- row 가로방향 (기본)
- row-reverse 역순 가로
- column 세로 방향
- column-reverse 역순 세로 방향
3) flex-wrap : 아이템 줄바꿈 처리 설정
- rowrap (기본) : 줄바꿈 X, 넘치면 삐져 나감
- wrap : 줄바꿈. float 나 inline-block 으로 배치한 요소와 비슷하게 동작
- wrap-reverse : 줄바꿈. 역순 배치
4) flex-flow : flex-direction + flex-wrap
ex ) flex-flow: row wrap;
5) justify-content : 가로 방향 아이템 정렬
- flex-start (기본값) : 시작점으로 정렬. flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위
- flex-end : 끝점으로 정렬. flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래
- center : 가운데 정렬
- space-between : 아이템들의 “사이(between)”에 균일한 간격
- space-around : 아이템들의 “둘레(around)”에 균일한 간격
- space-evenly : 아이템들의 사이와 양 끝에 균일한 간격. 주의! IE와 엣지(Edge)에서는 지원 X
6) align-items : 세로 방향 아이템 정렬
- stretch (기본값) : 아이템들이 수직축 방향으로 끝까지 쭈욱 늘어남
- flex-start : 아이템들을 시작점으로 정렬.flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽
- flex-end : 아이템들을 끝으로 정렬.flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽
- center : 아이템들을 가운데로 정렬
- baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬
7) align-content: 여러 행 정렬
flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 세로 방향 정렬을 결정
2. Flex item 적용 속성
1) flex-babis : 박스 기본 점유 크기
- width 속성에서 사용하는 모든 단위(px, %, em, rem 등)를 속성값에 사용 가능
- auto (기본값) : flex item은 상대적 flex item(relative flex item)이 되어 콘텐츠의 크기를 기준으로 크기가 결정 (width 값, width 값 없을 시 콘텐츠의 크기)
- 0 : flex item은 절대적 flex item(absolute flex item)이 되어 flex container를 기준으로 크기가 결정
- 설정한 값보다 원래의 width 값이 더 크면 그대로 유지
2) flex-grow : flex-basis 값보다 커질 수 있는지 (확장)
- 0 (기본값) : flex container의 크기가 커져도 flex item의 크기가 커지지 않고 원래 크기로 유지된다.
- 1 이상 : flex item의 원래 크기에 상관없이 flex container를 채우도록 flex item의 크기가 커진다.
- 숫자의 의미 : 아이템들의 flex-basis 를 제외한 여백 부분을 flex-grow 에 지정된 숫자의 비율로 나누어 가진다. → 여백의 비가 아닌 영역 자체를 원하는 비율로 분할하고 싶을 때 flex-basis 를 0 으로 처리 하는 이유
3) flex-shrink : flex-basis 값보다 작아질 수 있는지 (축소)
- 1 (기본값) : flex container의 크기가 flex item의 크기보다 작아질 때 flex item의 크기가 flex container의 크기에 맞추어 줄어든다.
- 0 : flex container의 크기가 flex item의 크기보다 작아져도 flex item의 크기가 줄어들지 않고 원래 크기로 유지, 아이템의 크기가 flex-babis 보다 작아지지 않아 고정폭의 컬럼을 만들 수 있다.
→ flex-shrink 를 1로 했을 때 , 브라우저의 width 축소 시 span(flex-item) 내 text 가 2줄이 되었다.(컨테이너의 크기가 작아져 item 의 크기가 줄어들었기 때문) 그래서 0으로 세팅하였더니 고정되었다..!
4) flex : flex-grow + flex-shrink + flex-basis
initial(기본값): flex container의 크기가 작아지면 flex item의 크기가 작아진다. 하지만 flex container의 크기가 커져도 flex item의 크기는 커지지 않는다. (0 1 auto)none: flex item의 크기가 커지거나 작아지지 않는다. flex container의 크기에 영향을 받지 않고, flex item의 원래 크기를 유지한다. (0 0 auto)auto: flex container의 크기에 맞추어 flex item의 크기가 커지거나 작아진다. (1 1 auto)양의 정수: flex container를 일정한 비율로 나눠 가지면서 flex container의 크기에 따라 flex item의 크기가 커지거나 작아진다. ( d d auto)
5) align-self : 해당 아이템 세로 정렬
- 기본값 : auto (align-items 설정 상속)
6) order : 시각적 나열 순서 결정
- 작은 숫자 일수록 먼저 배치. HTML 자체의 구조를 바꾸는 것은 아니다
7) z-index
- 숫자가 클 수록 위로 올라온다.
8) margin 사용한 flex-item 배치
수평 배치
margin-right: auto: 바깥 여백이 오른쪽의 모든 공간을 차지하기 위해 flex item을 오른쪽에서 왼쪽으로 민다.margin: 0 auto: 바깥 여백이 flex item을 양쪽에서 밀기 때문에 flex item이 수평 중앙에 위치한다.margin-left: auto: 바깥 여백이 왼쪽의 모든 공간을 차지하기 위해 flex item을 왼쪽에서 오른쪽으로 민다.
수직 배치
margin-bottom: auto: 바깥 여백이 아래쪽의 모든 공간을 차지하기 위해 flex item을 아래쪽에서 위쪽으로 민다.margin: auto 0: 바깥 여백이 flex item을 위아래로 밀기 때문에 flex item이 수직 중앙에 위치한다.margin-top: auto: 바깥 여백이 위쪽의 모든 공간을 차지하기 위해 flex item을 위쪽에서 아래쪽으로 민다.
헤더 배치
margin-bottom : auto;
푸터 배치
margin-top : auto;
중앙 정렬
.flex_container {
display: flex;
align-items: center;
justify-content: center;
}
//or
.flex_container {
display: flex;
}
.flex_item {
margin: auto;
} 참고
https://d2.naver.com/helloworld/8540176
https://studiomeal.com/archives/197
프론트가 좋아요