CSS Flex
Flex 속성
css
.parent {
display: flex;
align-items: ...;
justify-content: ...;
}
.child {
flex-grow: ...;
flex-basis: ...;
align-self: ...;
order: ...;
flex: 1; /* flex-grow: 1, flex-basis: 0 */
}
flex-basis
기본값: auto
flex-basis CSS 속성은 플렉스 항목의 초기 기본 크기를 설정 한다. 기본값은 auto로 내용의 길이에 따라 basis가 결정된다.
css
.child1 {
flex-basis: 100px;
}
.child2 {
flex-basis: 200px;
}
width 는 폭을 강제하지만 flex-basis 는 flex-basis 크기보다 커도 괜찮다.
flex-grow
기본값: 0
flex-grow 는 숫자를 지정할 수 있는데, 이 숫자의 의미는 아이템들의 flex-basis를 제외한 여백부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다.
여기서 남은 공간이라는 개념이 중요하다. 아래의 사진은 child1, child2 모두 같은 flex-grow:1 이지만 child1과 child2 의 크기는 다른 것을 볼 수 있다. 하지만 남은 공간의 비율은 child1과 child2가 1:1로 같다.
css
.child1 {
flex-grow: 1;
}
.child2 {
flex-grow: 1;
}
flex-shrink
기본값: 1
flex-shrink 는 flex-grow 와 쌍을 이루는 속성으로 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다. flex-shrink에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한 박스로 변하고 flex-basis보다 작아진다.
기본값이 1이기 때문에 따로 세팅하지 않아도 아이템이 flex-basis보다 작아질 수 있다.
flex-shrink를 0으로 설정하면 아이템의 크기가 flex-basis 보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들수 있다.
css
.child1 {
width: 100px; /* 고정폭 */
flex-shrink: 0;
}
.child2 {
flex-grow: 1;
}
flex 축약형
순서는 grow, shrink, basis. 2개만 작성하면 basis가 두번째. 단 축약형으로 쓸 경우 flex-grow만 명시하면 flex-basis의 기본값은 auto가 아닌 0이다.
css
.child {
flex: [flex-grow]; /* flex-basis 는 0 으로 설정됨 */
flex: [flex-grow] [flex-basis];
flex: [flex-grow] [flex-shrink] [flex-basis];
}
flex 를 이용하여 폭이 3:7 비율의 레이아웃 만들기
css
.child1 {
flex-grow: 3;
flex-basis: 0;
/* 또는 그냥 flex: 3 */
}
.child2 {
flex-grow: 7;
flex-basis: 0;
/* 또는 그냥 flex: 7 */
}