#container div {
width: 200px;
height: 200px;
flex-basis: 600px;
}
div:nth-of-type(1) {
flex-grow: 1;
flex-shrink: 2;
}
div:nth-of-type(5) {
flex-grow: 2;
flex-shrink: 0;
}
위와 같은 코드가 있을때,
flex-basis는 해당 box의 최소 크기를 정해준다.
만약 flex-direction이 column이고 box의 width 200px, height 200px 일때, flex-basis가 600px면
box가 설정한 width 200px을 무시하고 주축의 방향 ( direction ) 으로 box의 크기가 600px로 커진다.
즉, box의 기본값을 설정한다. 이는 반응형 디자인을 만들때 유용하다.
flex-grow는 container의 공간이 남을때 box가 해당 공간을 꽉 채우게 된다.
위처럼 1번 box의 grow:1 5번 box의 grow:2 일때는 두 박스 모두 공간을 채우는데, 5번 박스가 1번 박스보다
2배 더 큰 크기로 남은 공간을 채운다.
flex-shrink는 container의 공간이 꽉 차버렸을때 box의 크기가 작아지게 해주는데,
flex-shrink가 2면 다른 shrink보다 2배 더 작아지며 0이면 해당 박스는 작아지지 않는다.
위코드들은 속기법으로 flex에 입력이 가능하다.
flex: 2 1 800px;
해당코드는 grow는 2 shrink는 1 단위가 붙는 800px는 basis다
'The Web Developer 부트캠프 2022' 카테고리의 다른 글
| JS 문자열 indexof slice replace (0) | 2022.09.15 |
|---|---|
| JS 기초 연산 수지정, Booleans (0) | 2022.09.15 |
| Flex box (0) | 2022.09.13 |
| Css 사진 블로그 코드 (0) | 2022.09.12 |
| Background, Google Font link (0) | 2022.09.12 |