CSS3 플렉스박스란?-CSS 튜토리얼-php.cn

CSS3 플렉스박스란?

WBOY

풀어 주다： 2021-12-22 11:57:57

원래의

1950명이 탐색했습니다.

Css3에서 유연한 상자는 페이지가 다양한 화면 크기와 장치 유형에 적응할 수 있도록 하는 레이아웃 방법으로, 표시 속성을 사용하여 유연한 상자를 정의할 수 있으며 공간을 할당하는 더 효과적인 방법을 제공합니다. 구문은 "display:flex" 또는 "display:inline-flex"입니다.

CSS3 플렉스박스란?

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3 flexbox란 무엇입니까

Flexible box는 CSS3의 새로운 레이아웃 모드입니다.

CSS3 유연한 상자(Flexible Box 또는 Flexbox)는 페이지가 다양한 화면 크기와 장치 유형에 적응해야 할 때 요소가 적절한 동작을 갖도록 보장하는 레이아웃 방법입니다.

Flexbox 레이아웃 모델을 도입하는 목적은 컨테이너의 하위 요소에 빈 공간을 배열, 정렬 및 할당하는 보다 효율적인 방법을 제공하는 것입니다.

Flexible 박스는 Flex 컨테이너와 Flex 아이템으로 구성됩니다.

플렉서블 컨테이너는 디스플레이 속성 값을 flex 또는 inline-flex로 설정하여 플렉서블 컨테이너로 정의됩니다.

유연한 컨테이너에는 하나 이상의 유연한 하위 요소가 포함되어 있습니다.

참고: 유연한 컨테이너 외부와 유연한 하위 요소 내에서는 정상적으로 렌더링됩니다. 플렉스 박스는 플렉스 하위 요소가 플렉스 컨테이너 내에 배치되는 방식만 정의합니다.

Flexible 하위 요소는 일반적으로 Flexbox 내 한 행에 표시됩니다. 기본적으로 컨테이너당 하나의 행만 있습니다.

다음 요소는 왼쪽에서 오른쪽으로 일렬로 표시되는 elastic 하위 요소를 보여줍니다.

예제는 다음과 같습니다.

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<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>

로그인 후 복사

출력 결과:
CSS3 플렉스박스란?