아이템(자식)에게 주는 속성들
1. felx-basis
- flex의 기본 방향에 해당되는 엘리먼트의 크기를 지정하는 것
.item:nth-child(2) {
flex-basis: 300px;
/* basis - 기본 */
/* flex의 방향에 해당되는 엘리먼트의 크기를 지정하는 것 */
/* flex-grow: 2; */
}
2. flex-grow
- 각각의 엘리먼트들이 여백을 채울수 있을까?
- 각각의 엘리먼트들에게 커지게하는 값을 주면 여백의 공간이 각각의 엘리먼트에 1/n씩 나누어 가지는 것
- 공평하게 여백 전체를 item요소들이 나누어 가지는 것
- 1/5 씩 나눠가지계됨
여기서 2번만 2만큼 더 가지게 하고 싶다면?
-> flex-grow: 2; 적용
- 1, 3, 4, 5는 1/6을 가지고 2만 2/6을 가지는 것
.item:nth-child(2) {
flex-grow: 2;
}
3. flex-shrink
- 여백이 없어지는 순간보다 적어지면 flex는 화면의 컨테이너보다는 콘텐츠들이 작아지는 경향성을 갖고 있기 때문에 여백이 없어지는 순간에 아이템들이 작아지게 된다.
- 1,3,4,5는 컨텐트(내용을) 제외한 여백이 없기 때문에 작아지지만 2의 경우에는 여백이 존재하기 때문에 덜 작아진다.
-> 화면이 작아졌을 때, 원래 컨테이너의 크기보다 작아졌을 때의 그 크기가 있을 것이다. 그때 그 크기를 2번이 고통분담해서 자기의부피에서 빼고있는 것이다.
- 만약 2번이 고통분담을 하지 않고 자기 것을 그대로 갖는다면?
-> shrink: 0; 를 통해 적용할 수 있다.
.item:nth-child(2) {
flex-basis: 150px;
flex-shrink: 0;
}
-> 2의 크기는 변하지 않으며 나머지 블록이 시야에서 사라진다.
- 1과 2번 블록에 shrink를 각각 다르게 부여한다면?
.item:nth-child(1) {
flex-shrink: 1;
}
.item:nth-child(2) {
flex-basis: 150px;
flex-shrink: 2;
}
-> 1과 2번만이 공간이 있기 때문에 줄어들고 있다.
-> 하지만 2번은 1번보다 2배 더 빠르게 줄어든다.
<코드>
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: powderblue;
height: 200px;
display: flex;
flex-direction: row;
/* row가 기본값, 행의 방향으로 정렬 */
}
.item {
background-color: tomato;
color: white;
border: 1px solid white;
/* flex-grow: 1; */
/* 기본값이 0 */
}
.item:nth-child(1) {
flex-basis: 150px;
/* basis - 기본 */
/* flex의 방향에 해당되는 엘리먼트의 크기를 지정하는 것 */
/* flex-grow: 2; */
flex-shrink: 1;
}
.item:nth-child(2) {
flex-basis: 150px;
flex-shrink: 2;
}
</style>
</head>
<body>
<!-- 자식과 부모가 있어야한다. -->
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<!-- div 태그는 화면 전체를 다 사용하기 때문에 한줄로 표현된다. -->
</div>
</body>
</html>