아이템(자식)에게 주는 속성들
1. felx-basis
- flex의 기본 방향에 해당되는 엘리먼트의 크기를 지정하는 것
2. flex-grow
- 각각의 엘리먼트들이 여백을 채울수 있을까?
- 각각의 엘리먼트들에게 커지게하는 값을 주면 여백의 공간이 각각의 엘리먼트에 1/n씩 나누어 가지는 것
- 공평하게 여백 전체를 item요소들이 나누어 가지는 것
- 1/5 씩 나눠가지계됨
여기서 2번만 2만큼 더 가지게 하고 싶다면?
-> flex-grow: 2; 적용
- 1, 3, 4, 5는 1/6을 가지고 2만 2/6을 가지는 것
3. flex-shrink
- 여백이 없어지는 순간보다 적어지면 flex는 화면의 컨테이너보다는 콘텐츠들이 작아지는 경향성을 갖고 있기 때문에 여백이 없어지는 순간에 아이템들이 작아지게 된다.
- 1,3,4,5는 컨텐트(내용을) 제외한 여백이 없기 때문에 작아지지만 2의 경우에는 여백이 존재하기 때문에 덜 작아진다.
-> 화면이 작아졌을 때, 원래 컨테이너의 크기보다 작아졌을 때의 그 크기가 있을 것이다. 그때 그 크기를 2번이 고통분담해서 자기의부피에서 빼고있는 것이다.
- 만약 2번이 고통분담을 하지 않고 자기 것을 그대로 갖는다면?
-> shrink: 0; 를 통해 적용할 수 있다.
-> 2의 크기는 변하지 않으며 나머지 블록이 시야에서 사라진다.
- 1과 2번 블록에 shrink를 각각 다르게 부여한다면?
-> 1과 2번만이 공간이 있기 때문에 줄어들고 있다.
-> 하지만 2번은 1번보다 2배 더 빠르게 줄어든다.
<코드>
'html & css > 개념' 카테고리의 다른 글
| flex - 기타 속성들 (0) | 2023.11.24 |
|---|---|
| flex - holy grail layout (1) | 2023.11.24 |
| flex의 기본 (1) | 2023.11.24 |
| flex 소개 (1) | 2023.11.24 |
| 포지션 (position) (1) | 2023.11.22 |
