CSS의 탄력적 레이아웃이란 무엇입니까?-CSS 튜토리얼-php.cn

CSS의 탄력적 레이아웃이란 무엇입니까?

王林

풀어 주다： 2020-11-16 11:08:03

원래의

4109명이 탐색했습니다.

CSS의 유연한 레이아웃은 페이지가 다양한 화면 크기와 장치 유형에 적응해야 할 때 요소가 적절한 동작을 갖도록 보장하는 레이아웃 방법입니다. 유연한 레이아웃 모델을 도입하는 목적은 컨테이너의 하위 요소에 공백을 배열, 정렬 및 할당하는 보다 효율적인 방법을 제공하는 것입니다.

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>

로그인 후 복사