🏃🏻♂️ intro
flex는 한 방향(1차원) 레이아웃 시스템이다.
📦 컨테이너 속성
-
display: flex container를 정의flex: Block 특성의 flex container를 정의inline-flex: Inline 특성의 flex continer를 정의
-
flex-direction: flex items의 주 축을 설정row: items를 수평축에서 start에서 end로(왼쪽에서 오른쪽으로) 표시 (기본값)row-reverse: items를 수평축에서 end에서 start로(오른쪽으로 왼쪽에서) 표시column: items를 수직축에서 start에서 end로(위에서 아래로) 표시column-reverse: items를 수직축에서 end에서 start로(아래로 위에서) 표시
-
flex-wrap: flex items의 여러 줄 묶음(줄 바꿈) 설정nowrap: 모든 items를 여러 줄로 묶지 않는다. (기본값)wrap: items를 여러 줄로 묶는다.wrap-reverse:items를wrap의 역방향으로 여러 줄로 묶는다.
-
flex-flow:flex-direction와flex-wrap의 단축속성flex-direction 값, flex-wrap 값순으로 작성flex-direction: row,flex-wrap: nowrap이 기본값
-
justify-content: 주 축의 정렬 방법을 설정flex-start: items를 주 축의 시작점으로 정렬한다. (기본값)flex-end: items를 주 축의 끝점으로 정렬한다.center: items를 주 축 가운데 정렬한다.space-beteween: items의 시작과 끝은 시작점과 끝점에 붙이고 items 사이에 균등하게 여백을 주어 정렬한다.space-around: 모든 items의 좌우의 균등한 여백을 주어 정렬한다.
-
align-content: 교차 축의 정렬 방법을 설정 (2줄 이상)stretch: container의 교차 축을 채우기 위해 items를 늘린다. (기본값)flex-start: items를 교차 축의 시작점으로 정렬한다.flex-end: items를 교차 축의 끝점으로 정렬한다.center: items를 교차 축의 가운데로 정렬한다.space-beteween: items의 시작과 끝은 시작점과 끝점에 붙이고 items 사이에 균등하게 여백을 주어 정렬한다.space-around: 모든 items의 좌우의 균등한 여백을 주어 정렬한다.
-
align-items: 교차 축에서 items의 정렬방법 설정 (1줄)stretch: container의 교차 축을 채우기 위해 items를 늘린다. (기본값)flex-start: items를 교차 축의 시작점으로 정렬한다.flex-end: items를 교차 축의 끝점으로 정렬한다.center: items를 교차 축의 가운데로 정렬한다.baseline: items를 문자 기준선에 따라 정렬한다.
🧸 아이템 속성
order: flex item의 순서를 설정정수(기본값 : 0)
flex-grow: flex item의 증가 너비 비유을 설정정수(기본값 : 0)
flex-shirink: flex item의 감소 너비 비유을 설정정수(기본값 : 1)
flex-basis: flex item의 (공간 배분 전) 기본 너비 설정단위값(기본값: auto)- 값이 auto일경우
width,height등의 속성으로 item의 너비를 설정할 수 있다. - 하지만 단위값이 주어진 경우 설정할 수 없다.
flex:flex-grow,flex-shirink,flex-basis의 단축 속성flex-basis의 기본값은 0이 되므로 주의해야 한다.
align-self: 교차 축에서 item의 정렬 방법을 설정auto: container의align-items속성을 상속받는다. (기본값)stretch: container의 교차 축을 채우기 위해 items를 늘린다.flex-start: items를 교차 축의 시작점으로 정렬한다.flex-end: items를 교차 축의 끝점으로 정렬한다.center: items를 교차 축의 가운데로 정렬한다.baseline: items를 문자 기준선에 따라 정렬한다.
📏 주 축(mian-axis)과 교차 축(cross-axis)
주 축과 교차 축은 상대적인 개념이다. 즉 주 축이 정해지면 교차 축은 그 반대가 된다.
flex-direction: row 이면 주 축이 수평축, 교차 축이 수직축이된다.
flex-direction: column 이면 주 축이 수직축, 교차 축이 수평축이된다.
🛫 시작점(flex-start)과 끝점(flex-end)
시작점과 끝점 또한 상대적인 개념이다. 즉 시작점이 정해지면 끝점은 그 반대가 된다.
flex-direction: row 이면 시작점은 왼쪽이고, 끝점은 오른쪽이다.
flex-direction: row-reverse 이면 시작점은 오른쪽이고, 끝점은 왼쪽이다.
flex-direction: column 이면 시작점은 위쪽이고, 끝점은 아래쪽이다.
flex-direction: column-reverse 이면 시작점은 아래쪽이고, 끝점은 위쪽이다.
📚 참고사이트
console.log(noah(🍕 , 🍺)); // true