17 플렉서블 레이아웃

 

---

플렉서블 레이아웃

 

대부분의 웹사이트는 수직으로 구성 되어 있다.

수직으로 쌓이기 때문에 수직구성은 쉽게 구성할 수 있으나 수평 구성은 구현하기 쉽지않다.
이럴 때 좀 더 쉽게 수평으로 레이아웃을 구성하기 위해 사용하는 것이 플렉서블 레이아웃 이다.

 

선택자{display:flex;}

 

속성

 

1. flex-wrap

플렉스 라인에 더 이상 여유가 없을 때, 플렉스 요소의 위치를 다음줄로 넘길지 여부를 설정할 때 사용한다.

 

nowrap	기본설정, 플렉스 요소가 다음줄로 넘어가지 않음 요소의 너비를 줄여 한줄에 모두 배치
wrap	플렉스 요소가 여유 공간이 없으면 다음줄로 넘김
wrap-reverse	플렉스 요소가 여유 공간이 없으면 다음줄로 넘어가서 배치됨. 단, 아래쪽이 아닌 위쪽으로 넘김

 

선택자{flex-wrap: 속성값;}

 

 

 

nowrap > wrap > wrap-reverse

 

 

 

 

2. justify-content

 

플렉스 요소의 수평방향 정렬 방식을 설정할 때 사용한다.

 

flex-start	기본설정, 앞쪽에서부터 배치됨
flex-end	뒤쪽에서부터 배치됨
center	가운데 배치됨
space-between	요소들 사이에 여유공간을 두고 배치됨
space-around	앞, 뒤 그리고 요소들 사이에 모두 여유 공간을 두고 배치됨

 

 

선택자{justify-content: 속성값;}

 

 

 

 

3. align-items

 플렉스 요소의 수직 방향 정렬 방식을 설정한다.

 

stretch	기본설정, 플렉스 요소의 높이가 컨테이너의 높이와 같게 변경된 뒤 연이어 배치됨
flex-start	플렉스 요소는 플렉스 컨테이너의 위쪽에 배치됨
flex-end	플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치됨
center	플렉스 요소는 플렉스 컨테이너의 가운데 배치
baseline	플렉스 요소는 플렉스 컨테이너의 기준선에 배치됨

 

 

선택자{align-items: 속성값;}

 

 

 

 

4. align-self

플렉스 요소마다 서로 다른 align 속성값을 설정한다.

 

[예시]

#box1 {align-self: flex-end;}

 

1번 박스만 flex-end가 적용된 모습

 

 

 

5. order

플렉스 요소의 순서를 설정한다.

 

[예시]

#box1{order: 2;}
#box2{order: 3;}
#box3{order: 1;}

 

 

6. flex-grow

 

플렉스 컨테이너 아이템들이 차지할 너비들에 대한 증가형 숫자를 지정한다.

증가값이 0이거나 가변너비가 아닐 경우 변화가 없다.

 

선택자{flex-grow: 증가값;}

 

 

[예시]

#box1{flex-grow: 1;}
#box2{flex-grow: 2;}
#box3{flex-grow: 1;}

 

아이템이 총 3개 이고 증가 너비가 각 각 1,2,1(총 4) 이기 때문에

box1 : 1/4

box2 : 2/4

box3 : 1/4

만큼의 너비를 가지게 된다.

 

 

 

 

7. flex-basis

플렉스 컨테이너 아이템의 길이를 지정한다.

 

선택자{flex-basis: 값;}

 

[예시]

#box1{ flex-basis: 400px;}

 

 

 

8. flex-shrink

플렉스 컨테이너 아이템들이 차지할 너비들에 대한 감소형 숫자를 지정한다.

증가값이 0이거나 가변너비가 아닐 경우 변화가 없다.

 

 

선택자{flex-shrink: 감소값;}

 

 

예를 들어 Container의 너비가 줄어 Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px일 때,
요소 너비가 같은 Item이 2개이고 지정된 감소 너비가 각각 2와 1이라면, 감소 너비는 2:1 비율이며,
첫 번째 Item은 90px의 2/3인 60px 만큼 너비가 감소하고,
두 번째 Item은 90px의 1/3인 30px 만큼 너비가 감소한다.

 

 

 

 

 

flex-shrink 부분 설명 및 이미지 출처 : https://heropy.blog/2018/11/24/css-flexible-box/

---

 

열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.

수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>