>웹 프론트엔드 >CSS 튜토리얼 >flex는 CSS 속성인가요?

flex는 CSS 속성인가요?

青灯夜游
青灯夜游원래의
2021-11-18 17:09:071761검색

flex는 CSS 속성입니다. CSS flex 속성은 flex-grow, flex-shrink 및 flex-basis 속성의 약어로, 요소가 하위 요소가 아닌 경우 플렉스 박스 모델 객체의 하위 요소가 공간을 할당하는 방법을 설정하거나 검색하는 데 사용됩니다. 플렉스 박스 모델 객체의 flex 속성이 작동하지 않습니다.

flex는 CSS 속성인가요?

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

flex는 CSS 속성입니다.

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

flex 속성은 flex-grow, flex-shrink 및 flex-basis 속성의 약식 속성입니다. 기본값은 0 1 auto입니다. 0 1 auto

该属性有两个快捷值:auto (1 1 auto)none (0 0 auto)

이 속성에는 auto(1 1 자동)none(0 0 자동)이라는 두 가지 단축키 값이 있습니다. 세 가지 별도의 속성을 별도로 작성하는 대신 이 속성을 먼저 사용하는 것이 좋습니다. 브라우저가 관련 값을 추론하기 때문입니다.

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

구문: ​​
    flex: flex-grow flex-shrink flex-basis|auto;
  • flex-grow 다른 유연한 항목에 비해 항목이 늘어나는 정도를 지정하는 숫자입니다. ​
  • flex-shrink ​ 다른 플렉스 아이템에 비해 아이템이 축소되는 정도를 지정하는 숫자입니다.
  • flex-basis 아이템의 길이입니다. 유효한 값: "auto", "inherit" 또는 "%", "px", "em" 또는 기타 길이 단위가 뒤에 오는 숫자.
  • auto는 11auto와 같습니다.
  • none은 0 0 자동과 같습니다.

예:

<!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>
</body>
</html>
flex는 CSS 속성인가요?

(동영상 공유 학습: css 동영상 튜토리얼

)🎜

위 내용은 flex는 CSS 속성인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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