CSS3 플렉스박스란 무엇입니까? 디스플레이 속성에서 플렉스와 박스 속성값의 차이점과 사용법-CSS 튜토리얼-php.cn

CSS3 플렉스박스란 무엇입니까? 디스플레이 속성에서 플렉스와 박스 속성값의 차이점과 사용법

青灯夜游

풀어 주다： 2018-09-08 15:42:57

원래의

4679명이 탐색했습니다.

웹 프런트엔드 웹페이지 개발 및 디자인 과정에서 레이아웃은 매우 중요한 부분입니다. 레이아웃은 페이지에 있는 다양한 구성 요소와 요소의 크기와 위치를 결정하는 데 사용됩니다. 이 장에서는 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:

CSS3 플렉스박스란 무엇입니까? 디스플레이 속성에서 플렉스와 박스 속성값의 차이점과 사용법

부모 요소에 디스플레이:상자 텔레스코픽 상자 속성을 선언하면 상자 전체가 블록 요소라는 의미입니다. 인라인 요소가 되면 상위 요소 내의 하위 요소는 자유롭게 공간을 할당할 수 있습니다. 각 블록 요소가 자체 줄을 차지하는 대신 한 줄에 함께 배열되도록 협상됩니다. 예를 들어, 위의 예에서는 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:

CSS3 플렉스박스란 무엇입니까? 디스플레이 속성에서 플렉스와 박스 속성값의 차이점과 사용법