유연한 상자 레이아웃 플렉스란 무엇입니까?-CSS 지식-php.cn

집

일일 프로그램

CSS 지식

유연한 상자 레이아웃 플렉스란 무엇입니까?

藏色散人

Nov 12, 2018 pm 05:32 PM

이 글은 주로 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; 속성을 설정하고 사용하여 상자가 유연한 레이아웃 속성을 갖도록 할 수 있습니다.