CSS 스타일에서 flex 속성의 사용법은 무엇입니까-프런트엔드 Q&A-php.cn

CSS 스타일에서 flex 속성의 사용법은 무엇입니까

WBOY

풀어 주다： 2022-04-15 17:37:48

원래의

2901명이 탐색했습니다.

CSS에서 flex 속성은 플렉스 박스 모델 객체의 하위 요소가 공간을 할당하는 방법을 설정하거나 검색하는 데 사용됩니다. 이 속성은 "flex-grow", "flex-shrink" 및 "flex-basis"의 약어입니다. " 속성의 경우 구문은 "flex: 축약된 속성 값;"입니다.

CSS 스타일에서 flex 속성의 사용법은 무엇입니까

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 스타일에서 flex 속성의 용도는 무엇인가요?

flex 속성은 플렉스 박스 모델 객체의 하위 요소가 공간을 할당하는 방법을 설정하거나 검색하는 데 사용됩니다.

flex 속성은 flex-grow, flex-shrink 및 flex-basis 속성의 약어입니다.

참고: 요소가 Flexbox 모델 객체의 하위 요소가 아닌 경우 flex 속성은 효과가 없습니다.

구문은 다음과 같습니다.

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

로그인 후 복사

속성 값은 다음과 같습니다.

flex-grow 다른 유연한 항목에 비해 항목이 늘어나는 정도를 지정하는 숫자입니다.
flex-shrink 다른 플렉스 항목에 비해 항목이 축소되는 정도를 지정하는 숫자입니다.
flex-basis 아이템의 길이입니다. 유효한 값: "auto", "inherit" 또는 "%", "px", "em" 또는 기타 길이 단위가 뒤에 오는 숫자.
auto는 11auto와 같습니다.
none은 0 0 자동과 같습니다.
initial 이 속성을 기본값인 0 1 auto로 설정합니다.
inherit는 상위 요소에서 이 속성을 상속합니다.

예제는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<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 스타일에서 flex 속성의 사용법은 무엇입니까