CSS3 플렉스박스란 무엇입니까? 디스플레이 속성에서 플렉스와 박스 속성값의 차이점과 사용법
- 青灯夜游원래의
- 2018-09-08 15:42:574661검색
웹 프런트엔드 웹페이지 개발 및 디자인 과정에서 레이아웃은 매우 중요한 부분입니다. 레이아웃은 페이지에 있는 다양한 구성 요소와 요소의 크기와 위치를 결정하는 데 사용됩니다. 이 장에서는 CSS3 레이아웃 모델인 플렉스 박스 모델(flex box)을 소개합니다. 이를 통해 CSS3의 플렉스 박스가 무엇인지, flex 및 box 속성 값의 차이점과 사용법을 이해할 수 있습니다. 플렉스 박스의 표시 속성. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
1: 유연한 상자란 무엇입니까
CSS3 유연한 상자(Flexible Box 또는 Flexbox)는 페이지가 다양한 화면 크기와 장치 유형에 적응해야 할 때 요소가 적절한 동작을 갖도록 보장하는 레이아웃 방법입니다. Flexbox 레이아웃 모델을 도입하는 목적은 컨테이너의 하위 요소에 빈 공간을 배열, 정렬 및 할당하는 보다 효율적인 방법을 제공하는 것입니다. 일반적인 복잡한 레이아웃 요구사항을 간단한 방법으로 충족할 수 있습니다. 장점은 개발자가 특정 구현 방법을 제공하지 않고 레이아웃이 가져야 하는 동작만 선언한다는 것입니다. 브라우저는 실제 레이아웃을 담당합니다. 이 레이아웃 모델은 주요 브라우저에서 지원됩니다.
2: CSS3 가변 상자 콘텐츠
유연한 상자는 유연한 컨테이너(Flex 컨테이너)와 유연한 하위 요소(Flex 아이템)로 구성됩니다.
유연한 컨테이너는 display 속성의 값을 flex 또는 inline-flex로 설정하여 유연한 컨테이너로 정의됩니다.
유연한 컨테이너에는 하나 이상의 유연한 하위 요소가 포함되어 있습니다.
참고: 유연한 컨테이너 외부와 유연한 하위 요소 내부는 정상적으로 렌더링됩니다. 플렉스 박스는 플렉스 하위 요소가 플렉스 컨테이너 내에 배치되는 방식만 정의합니다.
3: display:box와 display:flex
1. display:box는 주로 상위 컨테이너에 있는 하위 요소의 배열, 순서 및 수직(수평) 정렬을 제어합니다.
display:box는 2009년 이전 구문은 오래되었으며 해당 접두사를 사용해야 합니다.
그래서 호환성 코드는 대략 다음과 같습니다
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex;예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒子--display: box;</title>
<style>
.box {
width: 330px;
height: 400px;
border: 1px #000 solid;
margin: 0 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
}
.box p {
width: 100px;
height: 20px;
background: #000;
margin: 5px;
}
</style>
</head>
<body>
<div class="box">
<p>123</p>
<p>123</p>
<p>123</p>
</div>
</body>
</html>Rendering:
부모 요소에 디스플레이:상자 텔레스코픽 상자 속성을 선언하면 상자 전체가 블록 요소라는 의미입니다. 인라인 요소가 되면 상위 요소 내의 하위 요소는 자유롭게 공간을 할당할 수 있습니다. 각 블록 요소가 자체 줄을 차지하는 대신 한 줄에 함께 배열되도록 협상됩니다. 예를 들어, 위의 예에서는 div에 있는 세 개의 p 태그가 계층적으로 분산되지 않고 한 행에 표시됩니다.
두 번째: display:flex는 주로 상위 컨테이너의 너비에 따라 특정 규칙에 따라 하위 컨테이너를 나눌 수 있도록 합니다.
display:flex;는 2011년 이후에 등장했으며 앞으로는 대부분의 새 브라우저에서 표준 구문이 될 것입니다. 기본적으로는 사용하지 않습니다. 현재는 Apple 브라우저에만 webkit 접두사가 있어야 하며 나머지는 정상적으로 표시될 수 있습니다.
새 버전은 텔레스코픽 상자의 표시 속성을 다음과 같이 설정합니다.
display:flex; 컨테이너 상자 모델을 블록 수준의 탄성 상자로 표시합니다(새 버전)
display:inline-flex; 컨테이너 상자 모델을 인라인 수준의 탄성 상자로 표시(새 버전)
Usage:
우선 flex를 사용하려면 상위 컨테이너가 필요하며, 상위 컨테이너.
상위 컨테이너: 컨테이너
속성:
display:flex;/*flex block level, inline-flex: inline fast*/
justify-content:space-around;/*center:horizontally centered, flex-start:close Left; flex-end: 오른쪽으로; space-between: 양쪽으로 기울이고 가운데로 균등하게 나눔; space-around: 완벽하게 균일한 분포*/
align-items: Stretch;/*center : 수직 중심, flex-start: 상단으로, flex-end: 하단으로, space-between, space-around*/
flex-direction: 행;/*열은 위에서 아래로, 열-역방향으로 배열 , 행: 왼쪽에서 오른쪽으로, 행 역방향: 오른쪽에서 왼쪽으로*/
flex-wrap:wrap;/*여러 줄 표시 줄 바꿈(상위 컨테이너가 표시하기에 충분하지 않은 경우 위에서 아래로), nowrap(컨테이너의 너비가 충분하지 않으면 하위 요소가 상위 컨테이너의 너비 또는 높이를 이등분합니다), Wrap-reverse: 아래에서 위로 */
/*flex-flow는 flex-direction의 약어입니다. flex-wrap*/
예:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>弹性盒子--display:flex;</title>
<style>
.container{
width:600px;
height:400px;
border:1px solid #000;
display:flex;/*flex块级，inline-flex:行内快*/
justify-content:space-around;
align-items:stretch;
flex-direction: row;
flex-wrap:wrap;
/*flex-flow是flex-direction、flex-wrap的缩写*/
}
.box{
width:200px;
height:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<div>
<div>这是中间的box1</div>
<div>这是中间的box2</div>
</div>
</body>
</html>Rendering:
Flex 레이아웃으로 설정한 후에는 하위 요소의 부동, 투명 및 수직 정렬 속성이 유효하지 않습니다.
위 내용은 CSS3 플렉스박스란 무엇입니까? 디스플레이 속성에서 플렉스와 박스 속성값의 차이점과 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!