Flexible box 의 모든것
flex element
flex 요소가 가지는 특별한 장점
일반적으로 블럭엘리먼트 의 경우 위치 지정에 많은 애로 점이 따랐다고 볼수 있는데요 flex요소의 경우 위치 지정이 아주 명쾌 해 진다는 특 장점을 가지고 있는것 같네요
단점이라면 이중 구조의 container블럭에서만 동작 이 가능 할뿐 아니라 기기에 따라 지원이 되지 않는 기능들이 많다는 것과 다양한 속성이 존재 하고 자식요소와 구별 해 지정 하는 복잡성이 라고 할수 가 있겠네요
그럼 에도 flex엘리먼트의 명확성은 지금 껏 거쳐 온 수많은 레이아웃 방식의 종결자라 할 만 합니다.
우선 시작 하는 단계 에서 아래의 큰 그림을 그려 봅니다.
style.css
html 코딩
display:flex; inline-flex;
flex-direction:row; row-reverse; column; column-reverse;
justify-content:flex-start; flex-end; center;
align-content:flex-start; flex-end; center;
align-items:flex-start;flex-end; center;
flex-wrap:nowrap;
flex-basis:
flex-grow:
flex-shrink:
order:
align-self:
flex-start;
flex-end;
center;
stretch;
부모 요소가 가지는 속성들 과 값
display
display:flex; 부모요소가 2개 이상 일때 부모요소가 블럭의 성질을 가짐 자식요소에는 영향이 없음
display:flex;
display:inline-flex;부모요소가 2개 이상일때 부모요소가 인라인 블럭의 성질을 가짐
display:inline-flex;
⟶
flex-direction
flex-direction:row; 자식요소가 왼쪽상단을 시작으로 가로 로 정렬 함
flex-direction:row;
⟶
flex-direction:row-reverse;자식요소가 오른쪽상단을 시작으로 가로로 정렬함
flex- :row-reverse;
⟵
flex-direction:column;자식요소가 왼쪽상단을 시작으로 세로로 정렬 함
flex-direction:column;
↓
flex-direction:column-reverse;자식요소가 왼쪽하단을 시작으로 세로로 정렬 함
flex-direction:column-reverse;
↑
flex-flow
flex-flow:row wrap;flex-direction:row와 flex-wrap:wrap;을 묶은 단축 속성자로 자식요소의 가로 줄을 두줄 이상을 묶은후 가로축 정렬함
flex-flow:column wrap;flex-direction:column과 flex-wrap:wrap;을 묶은 단축 속성자로 자식요소의 세로줄을 두줄 이상을 묶은후 세로축 정렬함
flex-wrap:nowrap
flex-wrap:nowrap;자식요소의 너비 값은 무시 되고 한 줄로 분배 하여 정렬함nowrap기본값
flex-wrap:nowrap;
flex-wrap:wrap
flex-wrap:wrap;자식요소들의 총 넓이 값이 부모 요소 보다 넘칠 경우 여러줄로 나누어 묶어서 정렬 함
⟶
⟶
flex-wrap:wrap-reverse; wrap 열 만 역으로 정렬 함
⟶
⟶
justify-content
flex-direction:row; justify-content:flex-start;가로메인축(진행축)의 시작점 을 기준으로 정렬 justify-content기능 불능으로 margin 대체
justify-content:flex-start;
margin-left:-1px;
⟶
flex-direction:row; justify-content:flex-end;row의 메인축(진행축)의 마지막 끝점을 기준점으로 정렬
justify-content:flex-end;
margin-right:-1px;
⟵
flex-direction:row; justify-content:center;가로 메인축(진행축)의 중앙 정렬(x축)
justify-content :의 값은 모바일 안드로이드 에서는 around 기능 으로만 작동 되네요.
정상 작동가능한 속성 값을 구현 할때 까지 일단 유보 하도록 하겠습니다.
flex-direction:row; justify-content:space-between;자식 요소들의 값이 부모요소 보다 작을때 메인축의 시작과 끝에 위치 한후 일정 하게 남은 여백을 분배 하여 위치함 이때 grow값은 0으로 설정 해야 하고 item값을 지정 해야함
정상작동이 되지 않아 margin값으로 구현 했습니다.
flex-direction:row; justify-content:space-around;자식요소들의 값이 부모요소 보다 작을때 부모 요소의 값을 일정 하게 분배 하여 위치함 grow값은 0이여야 하고 item의 값을 지정 해야 함 justify-content기능에서 이부분만 정상 작동이 되네요...
align-content
align-content; 교차축의 정렬 속성 으로 전체 item을 설정 하며 두줄 이상 일때 사용 하는 것에 최적화 된 속성임
stretch; flex-start; flex-end; center; space-berween; space-around;의 값을 가짐
align-content:stretch; 는 너비나 높이 값이 auto일때 교차축을 채우게 됨 align-content의 기본값은 stretch임
align-content:flex-start;교차축의 시작점으로 정렬함
align-content:flex-end;교차축의 마지막 끝점을 기준으로 정렬함
align-content:center;교차축의 중앙점으로 정렬함
align-content:space-between;첫 item은 교차축의 시작점에 마지막item을 교차축의 마지막 지점에 위치 한후 여백을 배분 정렬함
align-content:space-around;item들을 교차축의 여백으로 배분 정렬함
align-items
align-items;교차 축의 전체 item의 정렬 속성 으로 item들이 한줄 일때 사용이 용이 하며 두줄 이상에서도 가능 하나 align-content 속성이 우선 함 너비나 높이의 값이 auto일때는 치수가 늘어나 교차축을 채우게 됨 기본값은 stretch
stretch; flex-start; flex-end; center; baseline; 의 값을 가짐
align-items:stretch;높이 값이 auto일때 교차축을 채우기 위해 늘어남
현재A,C,D,F의 값은auto이고 B는 80px, E는 90px임
align-items:flex-start; 교차축의 시작점을 기준으로 가로 정렬함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임
align-items:flex-end;교차축의 마지막 지점을 기준으로 정렬 함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임
align-items:center;교차축 row의 중앙을 기준으로 정렬함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임
align-items:baseline;row의 교차축 폰트의 하단을 기준으로 정렬 함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임
자식 요소가 가지는 속성들과 값
flex-basis
flex-basis:자식요소들이 가지는 기본 너비의 값으로 px; em; cm; %; auto;의 단위와 숫자 값을 가진다.
기본값은 auto 이며 grow와 shrink에 우선 한다.
flex-grow
grow는 증가 비율 속성 으로
부모요소를 자식요소들이 배분 할때의 증가 비율로써 값이 0 일때
는 콘텐츠의 크기에 따라 가변 합니다
grow 값을 가졌을 경우
만약 A~F 까지의 item 중 A만 1이고 나머지가 0(제로)라고 하면 부모의 전체 면적중 콘텐츠 값을 제외한 전체 면적을 A가 차지 하게 되는 것임
자식요소들 중 A,B,C,E,F의 값은 1이고 D만 값을 2를 가지게 되었을때 다른 자식 요소 보다 두배의 면적 만큼 분배됨
flex-shrink
flex-shrink: items의 감소 속성으로 부모요소의 크기가 줄어 들면서 자식요소들에게 영향을 미치게 될 경우 축소 하는 배분 속성 으로 자식요소들의 shrink값에 따라 분담 하여 축소됨 숫자가 클수록 숫자 만큼의 비율로 많이 축소됨
자식요소들 중 A,B,C,E,F의 shrink 값은1이고 D의 shrink 값을 2 로 주었을때 다른 자식 요소 보다 두배의 비율 만큼 감소함
basis:80px; grow:1; shrink:1; (D의 shrink:2)이렇게 선언 했다면 기본 besis가 80px이기 때문에 item전체가 480px이 되어 container의 너비360px을 120px이 넘치게 되므로 이때 shrink값에 의해 item들이 shrink 비율에 따라 축소 되면서 container박스 안을 채우게 됩니다.
order
order;자식요소들의 순서를 설정 하는 속성으로 html태그 순서를 무시 하고 순서를 설정 함 숫자가 클수록 밀려납니다.
음수도 적용됩니다.
order:8
order:6
order:1
order:-1
order:9
order:3
align-self
align-self: 교차축에 대한 각 item에 대한 개별적 정렬 속성으로 stretch; flex-start; flex-end; center; baseline;의 값을 가지며 align-items보다 우선 함
align-self:flex-start;교차축의 시작점으로 가로 정렬함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임
예제) style.css
html 코딩소스
align-self:flex-end; row교차축의 마지막 끝점을 기준으로 가로 정렬함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임
align-self:center; 교차축의 중앙을 기준으로 가로 정렬함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임
align-self:baseline교차축 문자의 하단점으로 가로 정렬함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임
align-self:baseline