플렉스 레이아웃의 장점과 단점은 무엇입니까?-CSS 튜토리얼-php.cn

플렉스 레이아웃의 장점과 단점은 무엇입니까?

coldplay.xixi

풀어 주다： 2021-01-28 18:00:51

원래의

11468명이 탐색했습니다.

Flex 레이아웃의 장점과 단점은 다음과 같습니다. 1. Flex 레이아웃의 장점은 사용하기 쉽고 Flex 규칙에 따라 특정 레이아웃 효과를 얻기 쉽다는 것입니다. 2. 단점은 브라우저 호환성이 상대적으로 낮다는 것입니다. 열악하며 ie9 이상에서만 호환 가능합니다.

이 기사의 운영 환경: Acer S40-51, HBuilder

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

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

장점은 사용하기 쉽고 flex 규칙에 따라 특정 레이아웃 효과를 얻기 쉽다는 것입니다.

단점은 브라우저 호환성이 상대적으로 좋지 않고 ie9 이상에서만 호환 가능하다는 것입니다.

css3에서 도입한 Flex 레이아웃 소개:

Flexible 상자는 유연한 컨테이너(Flex 컨테이너)와 유연한 하위 요소(Flex 항목)로 구성됩니다. 플렉스 컨테이너는 디스플레이 속성 값을 flex 또는 inline-flex로 설정하여 플렉스 컨테이너로 정의됩니다. Flex 컨테이너에는 하나 이상의 Flex 하위 요소가 포함되어 있습니다.
참고: 유연한 컨테이너 외부와 유연한 하위 요소 내부에서는 렌더링이 정상입니다. 플렉스 박스는 플렉스 하위 요소가 플렉스 컨테이너 내에 배치되는 방식만 정의합니다. Flex 하위 요소는 일반적으로 Flex 상자 내부의 행에 표시됩니다. 기본적으로 컨테이너당 하나의 행만 있습니다.
예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</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>

로그인 후 복사

효과는 다음과 같습니다.

프로그래밍에 대해 더 자세히 알고 싶다면 php 교육에 주목하세요.

열!

플렉스 레이아웃의 장점과 단점은 무엇입니까?