CSS 플렉스 속성을 사용하는 방법
- 青灯夜游원래의
- 2019-05-28 13:15:303116검색
flex 속성은 CSS의 단축 속성으로, 플렉스 박스 모델 객체의 하위 요소가 공간을 할당하는 방법을 설정하거나 검색하는 데 사용됩니다. 요소가 Flexbox 모델 객체의 자식이 아닌 경우 flex 속성은 아무런 효과가 없습니다.
CSS 플렉스 속성을 어떻게 사용하나요?
flex 속성은 플렉스 박스 모델 객체의 하위 요소가 공간을 할당하는 방법을 설정하거나 검색하는 데 사용됩니다.
설명: flex 속성은 flex-grow, flex-shrink 및 flex-basis 속성의 단축 속성입니다.
CSS 구문
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
속성 값:
● flex-grow: 다른 유연한 항목에 비해 항목이 확장되는 정도를 지정하는 숫자입니다.
● flex-shrink: 다른 유연한 항목에 비해 항목이 줄어드는 정도를 지정하는 숫자입니다.
● flex-basis: 아이템의 길이. 유효한 값: "auto", "inherit" 또는 "%", "px", "em" 또는 기타 길이 단위가 뒤에 오는 숫자.
● auto: 요소의 크기는 자체 너비와 높이에 따라 조정되지만 Flex 컨테이너의 추가 여유 공간을 흡수하기 위해 자체적으로 늘어나고 컨테이너에 맞도록 최소 크기로 줄어듭니다. 이는 속성을 "flex: 1 1 auto"로 설정하는 것과 같습니다.
● none: 요소의 크기는 자체 너비와 높이에 따라 조정됩니다. 완전히 탄력적이지 않으며 플렉스 컨테이너에 맞게 줄어들거나 늘어나지 않습니다. 속성을 "flex: 0 0 auto"로 설정하는 것과 동일합니다.
● initial은 이 속성을 기본값인 "flex: 0 1 auto"로 설정합니다.
● inherit는 상위 요소에서 이 속성을 상속합니다.
참고: 요소가 Flexbox 모델 객체의 하위 요소가 아닌 경우 flex 속성은 효과가 없습니다.
css 플렉스 속성 예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}
#main div
{
flex:1;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">红色</div>
<div style="background-color:lightblue;">蓝色</div>
<div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
<p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 属性。</p>
<p><b>注意:</b> Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。</p>
<p><b>注意:</b> Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。</p>
</body>
</html>렌더링:
위 내용은 CSS 플렉스 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!