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

藏色散人
풀어 주다: 2021-01-11 11:21:47
원래의
7849명이 탐색했습니다.

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

flex-direction 속성

유연한 항목의 방향을 지정합니다. 프로젝트는 Flex 프로젝트(항목) 또는 줄여서 "프로젝트"라고 하는 컨테이너의 구성원입니다.

flex-direction

은 다양한 속성 값을 가질 수 있습니다.

row

: 기본값. 유연한 항목은 가로로 표시됩니다. 이 예에서는 항목이 오른쪽에서 왼쪽으로 가로로 표시됩니다.

row-reverse

: 행과 동일하지만 순서가 반대입니다.

column

: 유연한 항목이 세로로 나타납니다.

column-reverse

: 열과 동일하지만 순서가 반대입니다.

initial

: 이 속성을 기본값으로 설정합니다.

inherit

: 상위 요소에서 이 속성을 상속합니다.

Note

: 요소가 Flexbox 객체의 요소가 아닌 경우 flex-direction 속성은 효과가 없습니다. 이 글은

flexflexboxlayout

에 대한 간략한 소개입니다. 관심 있는 친구들에게 도움이 되었으면 좋겠습니다!

위 내용은 유연한 상자 레이아웃 플렉스란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿