>  기사  >  웹 프론트엔드  >  CSS 플렉스 속성을 사용하는 방법

CSS 플렉스 속성을 사용하는 방법

青灯夜游
青灯夜游원래의
2019-05-28 13:15:303089검색

flex 속성은 CSS의 단축 속성으로, 플렉스 박스 모델 객체의 하위 요소가 공간을 할당하는 방법을 설정하거나 검색하는 데 사용됩니다. 요소가 Flexbox 모델 객체의 자식이 아닌 경우 flex 속성은 아무런 효과가 없습니다.

CSS 플렉스 속성을 사용하는 방법

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 플렉스 속성을 사용하는 방법

위 내용은 CSS 플렉스 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.