CSS의 flex-grow 속성 사용법에 대한 자세한 설명(코드 포함)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS의 flex-grow 속성 사용법에 대한 자세한 설명(코드 포함)

不言

Nov 09, 2018 am 09:41 AM

이 기사에서는 Flexbox의 flex-grow 속성을 사용하여 프레임 너비가 감싸져 필요 이상으로 커질 때 프레임 너비를 넓히는 동작을 구현해 보겠습니다.

Flexbox의 프레임 너비가 필요한 것보다 넓은 경우 flex-grow 속성을 사용하여 프레임 너비를 지정하세요.

구문:

flex-grow :(数量）

로그인 후 복사

코드 예:

flex-grow.html

<!DOCTYPE html>
<html>
<head>    
<meta charset="utf-8" />    
<title></title>  
<link rel="stylesheet" href="flex-grow.css" />
</head>
<body>  
<div class="container">
    <div class="frameA">第一个内容<br/>php中文网<br />php中文网</div>
    <div class="frameB">第二个内容<br />php中文网<br /></div>
    <div class="frameC">第三个内容<br />php中文网<br />php中文网</div>
    <div class="frameD">第四个内容<br />php中文网<br />php中文网</div>
    <div class="frameE">第五个内容<br />php中文网<br />php中文网</div>
  </div>
</body>
</html>

로그인 후 복사

flex-grow.css

.container {
    display: flex;
}
.frameA {
    border: 1px solid #e9006b;
    flex-grow: 5;
}
.frameB {
    border: 1px solid #ff6a00;
    flex-grow: 4;
}
.frameC {
    border: 1px solid #d0b106;
    flex-grow: 3;
}
.frameD {
    border: 1px solid #4aae20;
    flex-grow: 2;
}
.frameE {
    border: 1px solid #01b9b3;
    flex-grow: 1;
}

로그인 후 복사

지침:

frame-A flex-grow를 5로, 프레임 B flex-grow를 설정합니다. ~ 4, 프레임 C flex-grow 3, 프레임 D flex-2에서 프레임 E flex-grow 1. 이 설정을 사용하면 텍스트를 표시하는 데 필요한 것보다 프레임 너비가 넓어지더라도 프레임 너비가 더 확장됩니다. 이 경우 프레임 확장 정도, 프레임A:프레임B:프레임 C:프레임 D:프레임E = 5:4:3:2:1 비율 확장

결과 표시

웹 브라우저를 사용하여 위 HTML을 표시합니다. 파일 . 아래 표시된 화면이 표시됩니다. 창 너비가 좁은 경우 각 프레임은 동일한 너비로 표시됩니다.

CSS의 flex-grow 속성 사용법에 대한 자세한 설명(코드 포함)

창 너비를 늘립니다. 프레임에 텍스트를 표시하기 위해 줄 바꿈이 필요한 상태에서는 프레임 너비가 여전히 동일한 너비로 표시됩니다.

CSS의 flex-grow 속성 사용법에 대한 자세한 설명(코드 포함)

상자 안의 텍스트가 원하지 않는 너비를 표시하는 경우 동일한 너비로 표시됩니다.

CSS의 flex-grow 속성 사용법에 대한 자세한 설명(코드 포함)

텍스트 줄 바꿈 없이 프레임을 표시하는 데 필요한 너비 이상으로 창 크기를 넓히면 각 프레임의 크기가 늘어납니다. 프레임 크기 증가는 프레임A:프레임B:프레임C:프레임D:프레임E = 5:4:3:2:1 비율입니다.

CSS의 flex-grow 속성 사용법에 대한 자세한 설명(코드 포함)

하나의 상자에만 flex-grow 속성을 설정합니다.

CSS 코드를 다음과 같이 변경하고 하나의 flex-grow 속성만 설정합니다.

flex-grow.css

.container {
    display: flex;
}
.frameA {
    border: 1px solid #e9006b;
    flex-grow: 1;
}
.frameB {
    border: 1px solid #ff6a00;
}
.frameC {
    border: 1px solid #d0b106;
}

.frameD {
    border: 1px solid #4aae20;
}
.frameE {
    border: 1px solid #01b9b3;
}

로그인 후 복사

웹 브라우저를 사용하여 페이지를 표시하세요. 창 너비가 더 좁은 경우 표시되는 프레임 너비는 이전 경우와 동일합니다.

CSS의 flex-grow 속성 사용법에 대한 자세한 설명(코드 포함)