CSS3 플렉스박스란 무엇입니까? 디스플레이 속성에서 플렉스와 박스 속성값의 차이점과 사용법
웹 프런트엔드 웹페이지 개발 및 디자인 과정에서 레이아웃은 매우 중요한 부분입니다. 레이아웃은 페이지에 있는 다양한 구성 요소와 요소의 크기와 위치를 결정하는 데 사용됩니다. 이 장에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7549
15
1382
52
83
11
58
19
22
90
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예)
Jun 28, 2022 pm 01:39 PM
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.
CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함)
Jul 19, 2022 am 11:28 AM
이 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 도움이 되셨으면 좋겠습니다.
공간을 차지하지 않고 CSS에서 요소를 숨기는 방법
Jun 01, 2022 pm 07:15 PM
두 가지 방법: 1. 표시 속성을 사용하여 요소에 "display:none;" 스타일을 추가합니다. 2. 요소를 숨기려면 위치 및 상단 속성을 사용하여 요소의 절대 위치를 설정하세요. 요소에 "position:absolute;top:-9999px;" 스타일을 추가하세요.
CSS3에서 레이스 테두리를 구현하는 방법
Sep 16, 2022 pm 07:11 PM
CSS에서는 border-image 속성을 사용하여 레이스 테두리를 만들 수 있습니다. border-image 속성은 이미지를 사용하여 테두리를 생성할 수 있습니다. 즉, 배경 이미지를 레이스 스타일로 지정하기만 하면 됩니다. "border-image: url(이미지 경로)은 이미지 테두리 너비가 안쪽으로 반복되는지 여부입니다.
텍스트 캐러셀과 이미지 캐러셀도 순수 CSS를 사용하여 구현할 수 있다는 것이 밝혀졌습니다!
Jun 10, 2022 pm 01:00 PM
텍스트 회전판과 이미지 회전판을 만드는 방법은 무엇입니까? 누구나 가장 먼저 생각하는 것은 js를 사용할지 여부입니다. 실제로 순수 CSS를 사용하여 구현하는 방법도 모두에게 도움이 되기를 바랍니다.
CSS3에서 마우스를 클릭하여 이미지를 확대하는 방법
Apr 25, 2022 pm 04:52 PM
구현 방법: 1. ":active" 선택기를 사용하여 그림에 대한 마우스 클릭 상태를 선택합니다. 2. 변환 속성과 scale() 함수를 사용하여 그림 확대 효과를 얻습니다. 구문은 "img:active {transform; : scale(x축 배율, y축 배율);}".
CSS3에서 애니메이션 회전 속도를 설정하는 방법
Apr 28, 2022 pm 04:32 PM
CSS3에서는 "animation-timing-function" 속성을 사용하여 애니메이션 회전 속도를 설정할 수 있습니다. 이 속성은 애니메이션이 순환을 완료하는 방법을 지정하고 애니메이션의 속도 곡선을 설정하는 데 사용됩니다. 애니메이션 타이밍 기능: 속도 속성 값;}".
CSS3 애니메이션 효과에 변형이 있나요?
Apr 28, 2022 pm 02:20 PM
CSS3의 애니메이션 효과에는 변형이 있습니다. 애니메이션 속성은 애니메이션 스타일을 설정하는 데 사용됩니다. 변형 속성은 변형 스타일을 설정하는 데 사용됩니다.
