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*