[CSS]css 레이아웃(3)- flexbox
아래 포스팅에 이어서 이번에는 flexbox의 아이템 속성에 대해 알아보고자 한다.
3. 아이템 속성
flex-grow, flex-shrink, flex-basis, flex, order, align-self
아이템 속성은 아이템이 속한 컨테이너의 사용가능 공간을 어떻게 분배받을지 그리고 아이템을 어떻게 배치할지에 대한 설정에 관한 속성이다.
1) flex-grow
남은 사용 가능 공간들이 있을 때 아이템의 사이즈를 늘리는 비율을 정의한다.
아래 예시를 보면 아이템의 width=40px 전체 컨테이너 크기는 300px이므로 남은 사용 공간 180px이 생긴다.
.item {
width: 40px;
height: 40px;
}
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 1;
}이 때, "flex-grow: 1"을 각각 설정하면, item1과 item2가 180px의 반인 90px을 각각 가져가 총 130px(40+90)을 차지하고 item3은 다른 설정이 없기 때문에 기본 설정대로 40px의 너비를 가진다.
2) flex-shrink
사용 가능 공간이 부족할 때 아이템의 사이즈를 줄이는 비율을 정의하는 속성이다.
예를 들어 모든 아이템이 width=150px일 때, flex-shrink의 설정이 없다면 모두 같은 비율로 컨네이너 크기에 맞에 줄어든다.
부족한 공간 : 150px / 한 item이 줄인 크기 : 150px/3 = 50px
item1에만 "flex-shrink: 3"을 설정하면, 부족한 공간 150px을 3:1:1 씩 부담해 item1은 90px, item2,3은 30px을 줄여 item1은 60px(150-90), item2,3은 120px(150-30)씩 차지한다.
.item {
width: 150px;
height: 40px;
}
.item1 {
flex-shrink: 3;
}
3) flex-basis
아이템의 크기를 지정해주는 속성이다.
아이템에 width, height 설정이 없을 경우에는 중심 축 방향은 컨텐츠 크기만큼, 반대 축 방향은 반대 축 전체를 차지한다.
만약, width=90px, height=40px 경우에는지정한 크기 그대로 아이템 크기가 설정된다.
.item {
width: 90px;
height: 40px;
}
반면에 flex-basis를 설정한 경우에는 itme width, height 지정과 상관 없이 중심축 방향은 flex-basis를 설정한 비율만큼 아이템 크기가 결정된다. 따라서 아래 코드의 같은 경우 itme1,2,3 모두 height은 설정한대로 40px이지만, item1,2는 300px의 20%인 60px로 각각 설정되고, item3은 300px의 60%인 180px로 설정된다.
.item {
width: 90px;
height: 40px;
}
.item1 {
flex-basis: 20%;
}
.item2 {
flex-basis: 20%;
}
.item3 {
flex-basis: 60%;
}
4) flex
[flex-grow, flex-shrink, flex-basis]를 한 번에 쓰는 축약형 속성이다.
flex: (flex-grow) (flex-shrink) (flex-basis); 순서대로 한 줄에 아이템 속성 설정이 가능하다.
꼭 기억할 필요는 없지만, 자주 사용되는 값의 조합은 따로 이름이 정해져있기도 해서 아래에 적어 놓았으니 참고하면 좋겠다.
① flex: 0 1 auto; = flex: initial;
flex-grow: 0 - 지정한 크기보다 커지지 않음
flex-shrink: 1 - 공간 부족시 크기 줄어듦
flex-basis: auto - 컨텐츠 크기만큼 차지
② flex: 1 1 auto; = flex: auto;
flex-grow: 1 - 남은 공간 만큼 차지
flex-shrink: 1 - 공간 부족시 크기 줄어듦
flex-basis: auto - 컨텐츠 크기만큼 차지
③ flex: 0 0 auto; = flex: none;
컨터이너 크기가 변해도 아이템 크기 불변
④ flex: n n n;
⑤ flex: n; = flex: n 1 0;
flex-grow만 지정
5) order
아이템간의 순서를 설정하는 속성이다. ... -2 -1 0(현재위치) 1 2 ...
아래와 같은 상황에서 item1을 제일 오른쪽에 배치하고 싶다면, 오른쪽으로 2칸 이동을 뜻하는 "order: 2;"를 지정해주면 된다.
.item1 {
order: 2;
}
이 상황에서 item3을 제일 왼쪽에 배치하고 싶으면, 왼쪽으로 한 칸 이동을 뜻하는 "order: -1;"을 지정해준다.
.item3 {
order: -1;
}
6) align-self
반대 축 기준으로 아이템의 정렬을 지정해주는 속성이다. (컨테이너 속성과 달리 지정된 아이템 하나만 정렬된다.)
auto 기본값, 부모 컨테이너의 속성 상속
flex-start 부모 컨테이너 시작선에 위치
flex-end 부모 컨테이너 끝선에 위치
center 부모 컨테이너 중심에 위치
stretch 부모 컨테이너에 맞게 늘어남
baseline 부모 컨테이너 기본선에 위치
.item1 {
align-self: center;
}
.item2 {
align-self: flex-start;
}
.item3 {
align-self: flex-end;
}
요약
1) flex-grow
남은 사용 공간에 아이템을 얼마나 늘릴 것인지에 대한 속성 ex) 0 1 2 ...
2) flex-shrink
공간이 부족할 때 아이템을 얼마나 줄일 것인지에 대한 속성 ex) 0 1 2 ...
3) flex-basis
아이템 크기 지정에 대한 속성 ex) auto, n%
4) flex
flex-grow flex-shrink flex-basis 축약형
5) order
아이템간 순서 지정에 대한 속성 ex) ... -2 -1 0(현재위치) 1 2 ...
6) align-self
반대 축 기준으로 하나의 아이템에대한 정렬에 관한 속성
ex) auto, flex-start, flex-end, center, stretch, baseline
전체 소스코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
background: white;
height: 100vh;
display: flex;
}
.item {
width: 90px;
height: 40px;
}
.item1 {
background: #ce93d8;
flex-grow: 0; /* 1 2 ... */
flex-shrink: 0; /* 1 2 ... */
flex-basis: auto; /*20% ...*/
flex: 1 1 auto
order: 2 /* -2 -1 1 2 ... */
align-self: center; /* flex-start, flex-end, stretch, baseline*/
}
.item2 {
background: #f48fb1;
align-self: flex-start;
}
.item3 {
background: #b39a71;
align-self: flex-end;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">aaaa</div>
<div class="item item2">bbbb</div>
<div class="item item3">cccc</div>
</div>
</body>
</html>