css
flex의 flex-grow / flex-shrink / flex-basis에 대해서
flex사용이유
-
레이아웃을 만들기 위해서
-
요소의 배치를 쉽게 위해서
flex의 컨테이너에서 사용되는 축약형
flex-flow : column nowrap; /* 컨테이너 내 아이템들을 세로로 배치하고, 줄바꿈을 하지 않습니다 */
flex-grow
- container에 여분의 공간이 있을때 동작
- flex-grow는 0이 기본값이다
- flex-glow는 설정값이 0보다 클때 동작함
- 숫자가 올라갈수록 확대비가 커진다
- 화면이 작을때는 설정된 width를 유지한다
- 그러나 화면이 커지고 여분의 공간이 있으면 해당 비율로 요소의 넓이를 넓게 설정한다
- 여러 아이템중에 하나의 아이템에만 flex-grow:1을 사용하면 해당 아이템의 넓이가 나머지 여분의 공간을 전부 차지하게 된다 (flex:1과 같다)
- flex-grow:1 패턴을 자주 접함
( 위의 이미지는 브라우저를 넓게 설정하고있다
3번과 4번은 50px로 고정이 되어있다
그리고 1번은 50px보다 큰 비율이며 2번은 그것보다 더욱 큰 비율을 차지한다 )
flex-shrink
- container에 여분의 공간이 없을때 동작
- 기본크기(width)보다 더 작아질때 flex-shrink의 비율만큼 더 작아짐
- flex-shrink는 1이 기본값이다.
- flex-shrink는 0보다 클때 동작함.
- 숫자가 올라갈수록 축소비가 커진다
- 화면이 클때는 설정된 width를 유지한다
- 그러나 화면이 작아지고 여분의 공간이 없으면 해당 비율로 요소의 넓이를 좁게 설정한다
( 위의 이미지는 브라우저를 좁게 설정하고있다
3번과 4번은 50px로 고정이 되어있다
그리고 2번은 50px보다 작은 비율이며 1번은 그것보다 더욱 작은 비율을 차지한다 )
flex-basis
- 기본값은 auto임
- flex의 item의 기본 넓이를 나타냄
- 100px,60%등으로 설정가능 ( 레이아웃 잡을때 %를 사용해서 유용함 )
- width와의 차이는 axis방향에 따라서 달라진다는것이다 (flex-direction이 row일 때는 너비, column일 때는 높이)
flex의 아이템에서 사용되는 축약형
flex : flex-grow flex-shrink flex-basis 순서이다
flex : 1의 형태로 많이 사용한다
※ 축약형을 사용하지않는걸 권한다고함
flex: 0 0 200px; /* 200px보다 크거나 작을수 없다 */
.item{
flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 1 500px; /* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}
( 화면 초기에 각 아이템의 비율을 설정한다.
1번은 10% , 2번은 20%, 3번은 30%, 4번은 40%를 아이템 너비로 사용한다
레이아웃에서 유용하게 사용될듯하다 )
기타지식
1. nth-child
li:nth-child(2) /* 자식 li태그의 2번째 요소 */
li:nth-child(2n) /* 자식 li태그의 짝수의 요소 */
2. vh와 %의 차이
height:100vh (현재화면 뷰포트기준)
height:100% (부모기준이다 그러므로 부모의 height가 지정되지 않으면 사용할수없다)
그래서 html,body태그에도 height:100%를 사용하지 않으면 사용할수없는 경우가 있다
3. border 축약형
border: 1px solide black;
참고
유튜브1*