유연한 상자 레이아웃 플렉스란 무엇입니까?
- 藏色散人원래의
- 2018-11-12 17:32:367845검색
이 글은 주로 css flex elastic box 레이아웃 에 대한 기본 지식을 간략하게 소개합니다.
이전 기사에서 css 그리드 레이아웃 을 소개했습니다. 이 섹션에서는 계속해서 css의 flex elastic 레이아웃을 소개합니다.
flex elasticLayout 은 CSS3의 효과적인 레이아웃 방법입니다.
플렉스 박스 레이아웃 모델(플렉스 박스) 을 도입한 목적은 컨테이너의 항목에 대한 빈 공간을 보다 효율적으로 배열, 정렬 및 할당하는 방법을 제공하는 것입니다. Flexbox 레이아웃 모델은 컨테이너에 있는 항목의 크기를 알 수 없거나 동적으로 변경되는 경우에도 정상적으로 작동할 수 있습니다.
또는 페이지 레이아웃이 다양한 화면 크기와 다양한 디스플레이 장치에 적응해야 할 때 예측 가능하게 작동하는 요소입니다. 부동 소수점을 사용하지 않으며 Flex 컨테이너의 가장자리가 콘텐츠의 가장자리와 함께 축소되지 않습니다.
그럼 플렉스 컨테이너란 무엇일까요?
Flex 레이아웃을 사용하는 요소를 Flex 컨테이너(컨테이너)라고 하며, "컨테이너"라고도 합니다.
추천 플렉스 레이아웃 비디오 튜토리얼: 《2018 최신 5 플렉스 탄력적 레이아웃 비디오 튜토리얼#🎜 🎜 #》
flex elastic 레이아웃간단한 코드 예:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
</head>
<style>
.box1{
background: #1F376D;
height: 500px;
width: 500px;
}
.box2{
background: #745A74;
height: 500px;
width: 500px;
}
.box3{
background: #26A3CF;
height: 500px;
width: 500px;
}
.box4{
background: #CCCC66;
height: 500px;
width: 500px;
}
</style>
<body style="display: flex; flex-direction: row">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box3"></div>
<div class="box1"></div>
</body>
</html>효과는 다음과 같습니다. #🎜 🎜#
display: flex; 속성을 설정하고 사용하여 상자가 유연한 레이아웃 속성을 갖도록 할 수 있습니다.
유연한 항목의 방향을 지정합니다. 프로젝트는 Flex 프로젝트(항목) 또는 줄여서 "프로젝트"라고 하는 컨테이너의 구성원입니다.
flex-direction은 다양한 속성 값을 가질 수 있습니다.
row: 기본값. 유연한 항목은 가로로 표시됩니다. 이 예에서는 항목이 오른쪽에서 왼쪽으로 가로로 표시됩니다.
row-reverse: 행과 동일하지만 순서가 반대입니다.
column: 유연한 항목이 세로로 나타납니다.
column-reverse: 열과 동일하지만 순서가 반대입니다.
initial: 이 속성을 기본값으로 설정합니다.
inherit: 상위 요소에서 이 속성을 상속합니다.
Note: 요소가 Flexbox 객체의 요소가 아닌 경우 flex-direction 속성은 효과가 없습니다. 이 글은
flexflexboxlayout에 대한 간략한 소개입니다. 관심 있는 친구들에게 도움이 되었으면 좋겠습니다!
위 내용은 유연한 상자 레이아웃 플렉스란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!