1. Flex-grow는 Flex 항목이 차지하는 너비를 확장하는 것을 의미합니다. 확장된 공간은 요소를 제외한 나머지 공백 공간입니다.
2. 음수 값은 지원되지 않습니다. 기본값은 0입니다. 이는 너비를 확장하기 위해 나머지 공백을 차지하지 않음을 의미합니다.
flex-grow가 0보다 크면 Flex 컨테이너에 남은 공간이 할당됩니다.
예
// HTML 부분 <div>
<div></div>
<div></div>
<div></div>
</div>
// CSS 부분.상자{
너비: 600px;
높이: 200px;
테두리: 1px 솔리드;
디스플레이: 플렉스;
}
.box div:n번째 유형(1){
너비: 100px;
높이: 100px;
배경색: 빨간색;
}
.box div:n번째 유형(2){
너비: 150px;
높이: 100px;
배경색: 하늘색;
}
.box div:n번째 유형(3){
너비: 200px;
높이: 100px;
배경색: 노란색;
}위 내용은 CSS의 flex-grow 속성에 대한 소개입니다. 모든 사람에게 도움이 되기를 바랍니다.