커리큘럼
01. HTML,CSS (v)
02. git
03. Java
04. Database
05. Jsp
06. 미니프로젝트
07. SpringFramework
08. SrpingBoot
09. React JS
10. 중간프로젝트
11. Linux 명령어
12. AWS 클라우드
13. Kotlin
14. Andriod
15. 최종프로젝트
flex
- 부모영역 -> container / 자식영역 -> item
container 적용 속성
display Flex Container를 정의
flex=flow flex-direction와 flex-wrap의 단축 속성
flex-direction Flex items의 주 축설정
flex-wrap Flex items의 여러 줄 묶음 설정
justify-content 주 축의 정렬 방법 설정
align-content 교차 축의 정렬 방법 설정
align-items 교차 축에서 items의 정렬 방법 설정
display
flex : Block특성의 Flex Container를 정의
inline-flex : inline특성의 Flex Container를 정의
---
display:flex; /* container 세로 배치*/
display:inline-flex; /* container 가로배치 */
flex-direction
row : items를 수평축으로 표시
row-reverse : items를 row의 반대 축으로 표시
column : items를 수직축으로 표시
column-reverse : items를 column의 반대 축으로 표시
flex-direction:row; /* default , item 가로 배치 */
flex-direction:column; /* item 세로 배치 */
flex-direction:row-reverse; /* 왼쪽부터 item이 나열되기 시작했다면 이 속성 사용시 오른쪽부터 나열 */
flex-direction:column-reverse; /* 위에서부터 아래로 나열되기 시작했다면 아래에서 위로 나열 */
flex-wrap
nowrap : 모든 items를 여러 줄로 묶지 않음 (한 줄에 표시)
wrap : items를 여러 줄로 묶음
wrap-reverse : items를 wrap의 역 방향으로 여러 줄로 묶음
flex-wrap:wrap; /* 화면을 넘어가면 아래로 자동으로 넘김*/
flex-wrap:nowrap-reverse; /* 화면을 넘어가도 다음 줄로 넘기지 않음*/
flex-wrap:wrap-reverse; /* wrap속성 기준, 위에서부터 아래로 쌓던 것을 아래에서 위로 쌓음*/
justify-content
- 메인축 정렬
- flex-direction:row를 기준으로 수평 정렬
flex-start : items를 시작점으로 정렬
flex-end : items를 끝점으로 정렬
center : items를 가운데로 정렬
space-between : 시작item은 시작, 마지막 item은 끝점에 정렬되고 나머지 items는 거리 동일하게 정렬
space-around : items를 균등한 여백을 포함해 정렬
---
/* item 정렬 방법 설정 */
/* 시작점부터 시작하여 나열(items사이 간격 없음)
-------->방향 정렬 |123456789_________| */
justify-content:flex-start;
/* 종료점부터 시작하여 나열(items사이 간격 없음)
---------> 방향 정렬 |_________123456789| */
justify-content:flex-end;
/* 중앙정렬(items사이 간격없음)
|____123456789_____| */
justify-content: center;
/* 시작점에는 첫item, 마지막점에는 마지막 item 나열 후 나머지 item들의 간격을 동일하게 하여 나열
|1__2__3__4__5__6__7__8__9| */
justify-content: space-between;
/* 모든 간격 동일하게 하여 정렬
|_1_2_3_4_5_6_7_8_9_| */
justify-content: space-around;
align-items
- 반대축 정렬
- flex-direction:row를 기준으로 주축은 수평정렬이기 떄문에 반대축은 수직정렬
stretch : Container의 교차 축을 채우기 위해 items를 늘림
flex-start : items를 각 줄의 시작점으로 정렬
flex-end : items를 각 줄의 끝점으로 정렬
center : items를 가운데 정렬
baseline : items를 문자 기준선에 정렬
---
align-items:stretch; /* (default) container의 items에 높이를 설정하지 않았을 경우 주축의 높이에 맞게 다른 item들의 높이도 늘림 / items중 가장 높은 높이를 가지는 item의 높이만큼 다른 item의 높이도 늘림. */
align-items:flex-start; /* item들을 반대축의 시작점에 붙게 정렬 / flex-direction:row 기준 상단에 붙게 정렬 */
align-items: flex-end; /* item들을 반대축의 끝점에 붙게 정렬 / flex-direction:row 기준 하단에 붙게 정렬 */
align-items: center; /* 가운데 정렬/ flex-direction:row 기준 height와 line-height를 같게 해준것과 동일함 */
align-items:baseline; /* 문자기준선을 기준으로 정렬 */
align-content
stretch Container의 교차 축을 채우기 위해 items를 늘림
flex-start items를 시작점으로 정렬
flex-end items를 끝점으로 정렬
center items를 가운데 정렬
space-between 시작 item은 시작점에, 마지막 item은 끝점에 정렬되고 나머지 item 은 사이에 고르게 정렬
space-around item를 균등한 여백을 포함해 정렬
---
align-content:stretch;
align-content:flex-start;
align-content:fledx-end;
align-content:center;
align-content:space-between;
align-content:space-around;
item(자식박스)에 적용속성
flex-grow : flex item의 증가 너비 비율 설정
flex-shrink : flex item의 감소 너비 비율 설정
flex-basis : flex item의 기본 너비 설정 (공간 배분 전)
align-self : 교차 축에서 item의 정렬 방법 설정
order : Flex item의 순서 설정 (숫자가 작을수록 앞에)
flex : flex-grow, flex-shrink,flex-basis의 단축 속성