CSS의 flex-grow 속성 사용법에 대한 자세한 설명(코드 포함)
- 不言원래의
- 2018-11-09 09:41:274066검색
이 기사에서는 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을 표시합니다. 파일 . 아래 표시된 화면이 표시됩니다. 창 너비가 좁은 경우 각 프레임은 동일한 너비로 표시됩니다.
창 너비를 늘립니다. 프레임에 텍스트를 표시하기 위해 줄 바꿈이 필요한 상태에서는 프레임 너비가 여전히 동일한 너비로 표시됩니다.
상자 안의 텍스트가 원하지 않는 너비를 표시하는 경우 동일한 너비로 표시됩니다.
텍스트 줄 바꿈 없이 프레임을 표시하는 데 필요한 너비 이상으로 창 크기를 넓히면 각 프레임의 크기가 늘어납니다. 프레임 크기 증가는 프레임A:프레임B:프레임C:프레임D:프레임E = 5:4:3:2:1 비율입니다.
하나의 상자에만 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;
}웹 브라우저를 사용하여 페이지를 표시하세요. 창 너비가 더 좁은 경우 표시되는 프레임 너비는 이전 경우와 동일합니다.
웹 브라우저 창 너비를 늘립니다. 표시 중에 줄 바꿈이 필요한 상태에서는 각 프레임의 너비가 동일합니다.
창 크기를 더 늘려보세요. 중간에 끊김 없이 텍스트의 너비를 표시합니다.
창 너비를 더욱 넓혀보세요. flex-grow 속성이 있는 프레임 A의 너비는 더 늘어났지만 flex-grow 속성이 지정되지 않은 다른 테두리의 너비는 동일하게 유지됩니다.
창 너비를 더 넓혀도 프레임A만 너비가 더 넓습니다.
위 내용은 CSS의 flex-grow 속성 사용법에 대한 자세한 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!