CSS 플렉스 속성을 사용하는 방법-CSS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2019-05-28 13:15:30

원래의

3120명이 탐색했습니다.

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