CSS의 탄력적 레이아웃이란 무엇입니까?
- 王林원래의
- 2020-11-16 11:08:034058검색
CSS의 유연한 레이아웃은 페이지가 다양한 화면 크기와 장치 유형에 적응해야 할 때 요소가 적절한 동작을 갖도록 보장하는 레이아웃 방법입니다. 유연한 레이아웃 모델을 도입하는 목적은 컨테이너의 하위 요소에 공백을 배열, 정렬 및 할당하는 보다 효율적인 방법을 제공하는 것입니다.
탄력적 레이아웃 소개:
Flexible 상자는 CSS3의 새로운 레이아웃 모드입니다.
(동영상 공유 학습: css 동영상 튜토리얼)
CSS3 유연한 상자(Flexible Box 또는 Flexbox)는 페이지가 다양한 화면 크기와 장치 유형에 적응해야 할 때 요소가 적절한 동작을 갖도록 보장하는 레이아웃 방법입니다.
Flexbox 레이아웃 모델을 도입하는 목적은 컨테이너의 하위 요소에 빈 공간을 배열, 정렬 및 할당하는 보다 효율적인 방법을 제공하는 것입니다.
플렉시블 박스 콘텐츠:
플렉시블 박스는 플렉서블 컨테이너(Flex 컨테이너)와 플렉서블 하위 요소(Flex 아이템)로 구성됩니다.
플렉서블 컨테이너는 디스플레이 속성 값을 flex 또는 inline-flex로 설정하여 플렉서블 컨테이너로 정의됩니다.
유연한 컨테이너에는 하나 이상의 유연한 하위 요소가 포함되어 있습니다.
참고: 유연한 컨테이너 외부와 유연한 하위 요소 내에서는 정상적으로 렌더링됩니다. 플렉스 박스는 플렉스 하위 요소가 플렉스 컨테이너 내에 배치되는 방식만 정의합니다.
Flexible 하위 요소는 일반적으로 Flexbox 내 한 행에 표시됩니다. 기본적으로 컨테이너당 하나의 행만 있습니다.
다음 요소는 왼쪽에서 오른쪽으로 연속으로 표시되는 탄력적 하위 요소를 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div> </div>
</body>
</html>관련 권장 사항: CSS 튜토리얼
위 내용은 CSS의 탄력적 레이아웃이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!