성배 레이아웃을 만드는 flex엘리먼트

flex element

flex 요소가 가지는 특별한 장점

flex의 기본성질(요소)은 inline-block일 가능성이 매우 높아 보입니다.
속성의 선언에 따라 가변성이 매우 뚜렸하게 반응 하는 성질의 인라인 블록 요소가 매우 강한 블록레벨 엘리먼트 인것 같습니다.

일반적으로 블럭엘리먼트 의 경우 위치 지정에 많은 애로 점이 따랐다고 볼수 있는데요 flex요소의 경우 위치 지정이 아주 명쾌 해 진다는 특 장점을 가지고 있는것 같네요

단점이라면 이중 구조의 container블럭에서만 동작 이 가능 할뿐 아니라 기기에 따라 지원이 되지 않는 기능들이 많다는 것과 다양한 속성이 존재 하고 자식요소와 구별 해 지정 하는 복잡성이 라고 할수 가 있겠네요

그럼 에도 flex엘리먼트의 명확성은 지금 껏 거쳐 온 수많은 레이아웃 방식의 종결자라 할 만 합니다.

우선 시작 하는 단계 에서 아래의 큰 그림을 그려 봅니다.

style.css

<style> .container{ display:flex; flex-direction:row; justify-content;center; align-items:center; height:400px; width:400px; background:powderblue; border:1px solid gray; margin-bottom:10px; text-align:center; } .item{ width:100px; height:100px; border;1px solid gray; background:tomato; align-self:center; } </style>

html 코딩

<div class="container"> <div class="item"> basis </div> </div>

container Element 속성
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;

basis

itemsElement 속성
flex-basis:
flex-grow:
flex-shrink:
order:
align-self:
flex-start;
flex-end;
center;
stretch;

부모 요소가 가지는 속성들 과 값

display

display:flex; 부모요소가 2개 이상 일때 부모요소가 블럭의 성질을 가짐 자식요소에는 영향이 없음

display:flex;

1

2

3

4

5

6

display:inline-flex;부모요소가 2개 이상일때 부모요소가 인라인 블럭의 성질을 가짐

display:inline-flex;

⟶

1

2

3

4

5

6

flex-direction

flex-direction:row; 자식요소가 왼쪽상단을 시작으로 가로 로  정렬 함

flex-direction:row;

⟶

A

B

C

D

E

F

flex-direction:row-reverse;자식요소가 오른쪽상단을 시작으로 가로로 정렬함

flex- :row-reverse;
                                                                        ⟵

A

B

C

D

E

F

flex-direction:column;자식요소가 왼쪽상단을 시작으로 세로로 정렬 함

flex-direction:column;

                                  ↓

1

2

3

4

5

6

flex-direction:column-reverse;자식요소가 왼쪽하단을 시작으로 세로로 정렬 함

flex-direction:column-reverse;

1

2

3

4

5

6

                               ↑

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

basis

grow

shrink

start

end

flex-wrap:wrap

flex-wrap:wrap;자식요소들의 총 넓이 값이 부모 요소 보다 넘칠 경우 여러줄로 나누어 묶어서 정렬 함

    ⟶

A

B

C

D

E

F

    ⟶

flex-wrap:wrap-reverse; wrap 열 만 역으로 정렬 함

    ⟶

A

B

C

D

E

F

    ⟶

justify-content

flex-direction:row; justify-content:flex-start;가로메인축(진행축)의 시작점 을 기준으로 정렬 justify-content기능 불능으로 margin 대체

justify-content:flex-start;
margin-left:-1px;

 ⟶

A

flex-direction:row; justify-content:flex-end;row의 메인축(진행축)의 마지막 끝점을 기준점으로 정렬

justify-content:flex-end;
margin-right:-1px;

                                                 ⟵

A

flex-direction:row; justify-content:center;가로 메인축(진행축)의 중앙 정렬(x축)

A

justify-content :의 값은 모바일 안드로이드 에서는 around 기능 으로만 작동 되네요.
정상 작동가능한 속성 값을 구현 할때 까지 일단 유보 하도록 하겠습니다.

flex-direction:row; justify-content:space-between;자식 요소들의 값이 부모요소 보다 작을때 메인축의 시작과 끝에 위치 한후 일정 하게 남은 여백을 분배 하여 위치함 이때 grow값은 0으로 설정 해야 하고 item값을 지정 해야함

정상작동이 되지 않아 margin값으로 구현 했습니다.

A

B

C

D

E

F

flex-direction:row; justify-content:space-around;자식요소들의 값이 부모요소 보다 작을때 부모 요소의 값을 일정 하게 분배 하여 위치함 grow값은 0이여야 하고 item의 값을 지정 해야 함 justify-content기능에서 이부분만 정상 작동이 되네요...

A

B

C

D

E

F

align-content

align-content; 교차축의 정렬 속성 으로 전체 item을 설정 하며 두줄 이상 일때 사용 하는 것에 최적화 된 속성임

stretch;  flex-start; flex-end; center; space-berween; space-around;의 값을 가짐

align-content:stretch; 는 너비나 높이 값이 auto일때 교차축을 채우게 됨 align-content의 기본값은 stretch임

a

b

c

d

e

f

align-content:flex-start;교차축의 시작점으로 정렬함

a

b

c

d

e

f

align-content:flex-end;교차축의 마지막 끝점을 기준으로 정렬함

a

b

c

d

e

f

align-content:center;교차축의 중앙점으로 정렬함

a

b

c

d

e

f

align-content:space-between;첫 item은 교차축의 시작점에 마지막item을 교차축의 마지막 지점에 위치 한후 여백을 배분 정렬함

a

b

c

d

e

f

align-content:space-around;item들을 교차축의 여백으로 배분 정렬함

a

b

c

d

e

f

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임

A

B

C

D

E

F

align-items:flex-start; 교차축의 시작점을 기준으로 가로 정렬함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임

A

B

C

D

E

F

align-items:flex-end;교차축의 마지막 지점을 기준으로 정렬 함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임

A

B

C

D

E

F

align-items:center;교차축 row의 중앙을 기준으로 정렬함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임

A

B

C

D

E

F

align-items:baseline;row의 교차축 폰트의 하단을 기준으로 정렬 함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임

A

B

C

D

E

F

자식 요소가 가지는 속성들과 값

flex-basis

flex-basis:자식요소들이 가지는 기본 너비의 값으로 px; em; cm; %; auto;의 단위와 숫자 값을 가진다.

기본값은 auto 이며 grow와 shrink에 우선 한다.

flex-grow

grow는 증가 비율 속성 으로

부모요소를 자식요소들이 배분 할때의 증가 비율로써 값이 0 일때
는 콘텐츠의 크기에 따라 가변 합니다

A grow basis

B

C

D

E

F

grow 값을 가졌을 경우

만약 A~F 까지의 item 중 A만 1이고 나머지가 0(제로)라고 하면 부모의 전체 면적중 콘텐츠 값을 제외한 전체 면적을 A가 차지 하게 되는 것임

A

B

C

D

E

F

자식요소들 중 A,B,C,E,F의 값은 1이고 D만 값을 2를 가지게 되었을때 다른 자식 요소 보다 두배의 면적 만큼 분배됨

A

B

C

D

E

F

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박스 안을 채우게 됩니다.

A

B

C

D

E

F

order

order;자식요소들의 순서를 설정 하는 속성으로 html태그 순서를 무시 하고 순서를 설정 함 숫자가 클수록 밀려납니다.
음수도 적용됩니다.

A
order:8

B
order:6

C
order:1

D
order:-1

E
order:9

F
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

<style> .container{ flex-direction:row; flex-wrap:wrap; align-items:center; display:flex; height:200px; width:360px; background:powderblue; border:1px solid gray; } .item{ width:80px; height:50px; font-size:14pt; line-height:50px; text-align:center; background:tomato; color:white; border:1px solid gray; } .item-a,.item-d{ align-self:flex-start; } .item-c,.item-f{ align-self:stretch; } .item-b{ height:80px; } .item-e{ height:90px; } </style>

html 코딩소스

<div class="container"> <div class="item item-a">A </div> <div class="item item-b">B </div> <div class="item item-c">C </div> <div class="item item-d">D </div> <div class="item item-e">E </div> <div class="item item-f">F </div> </div>

align-items:center;B,E

align-self:flex-start; A, D

align-self:stretch; C, F

최종결과)

A

B

C

D

E

F

align-self:flex-end; row교차축의 마지막 끝점을 기준으로 가로 정렬함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임

align-items:center; A,B,D,E,

align-self:flex-end; C, F

최종결과)

A

B

C

D

E

F

align-self:center; 교차축의 중앙을 기준으로 가로 정렬함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임

align-items:center;B,C,E,F

align-self:center; A, D

최종결과)

A

B

C

D

E

F

align-self:baseline교차축 문자의 하단점으로 가로 정렬함 현재 A,C,D,F의 높이는 50px, B는 80px, E는 90px임

align-self:baseline

최종결과)

A

B

C

D

E

F