CSS3를 사용하여 유연한 상자 레이아웃을 구현하는 방법-CSS 튜토리얼-php.cn

CSS3를 사용하여 유연한 상자 레이아웃을 구현하는 방법

坏嘻嘻

풀어 주다： 2018-09-26 11:50:36

원래의

4800명이 탐색했습니다.

기존 레이아웃 구성표는 플로트, 디스플레이 및 위치의 상자 모델을 기반으로 합니다. 개발 언어가 향상됨에 따라 유연한 상자 레이아웃 모델은 기존 레이아웃의 복잡성을 버리기 때문에 웹 개발자의 도구 상자에서 좋은 도구가 되었습니다. 상자 설정은 페이지 호환성에 대한 개발자의 요구 사항을 완벽하게 충족할 수 있습니다. 즉, 페이지가 다양한 화면 크기와 장치 유형에 적응해야 하는 경우에도 요소가 적절한 동작을 하도록 보장할 수 있습니다. 이 글은 유연한 박스 레이아웃을 빠르게 사용하는 방법에 대한 내용을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Flexible Box의 이해

Flexible 상자는 Flex 컨테이너(Flex 컨테이너)로 구성됩니다. ) 유연한 하위 요소(Flex 항목)로 구성되며, 유연한 컨테이너는 display 속성의 값을 flex 또는 inline-flex로 설정하여 유연한 컨테이너로 정의할 수 있습니다. -강요.

기존 박스 모델은 이러한 특수 페이지의 레이아웃에 매우 불편합니다. 예를 들어 수직 중앙 정렬 및 하위 요소 정렬 구현은 매우 번거롭습니다. 그러나 w3c의 flex 레이아웃 도입으로 다양한 페이지 레이아웃을 간단하고 완전하며 반응적으로 구현할 수 있어 개발 프로세스가 크게 단순화되었으며 모든 브라우저에서 flex 레이아웃이 지원됩니다.

#🎜🎜 #

연성 상자의 예

예 1: 기존 모델

<style>
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 450px;
            height: 150px;
            background-color: darkcyan;
                     }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
                 }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

로그인 후 복사

#🎜🎜 #

구조는 그림과 같습니다

CSS3를 사용하여 유연한 상자 레이아웃을 구현하는 방법

예 2: 하위 정렬 -elements#🎜 🎜#

<style> 
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 450px;
            background-color: darkcyan;
            flex-direction: row-reverse;
        }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
        }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

로그인 후 복사

구조는 사진과 같습니다

#🎜🎜 #

예시 3 : 중앙에 상자가 표시됩니다 CSS3를 사용하여 유연한 상자 레이아웃을 구현하는 방법

<style>
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 500px;
            background-color: darkcyan;
            justify-content: center;
        }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
        }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

로그인 후 복사

구조는 그림과 같습니다
#🎜 🎜#

예 4: 하단에서 표시

CSS3를 사용하여 유연한 상자 레이아웃을 구현하는 방법

<style>
        .flex-container{
            display: flex;
            display: -webkit-flex;
            width: 500px;
            height: 211px;
            background-color: darkcyan;
            align-items: flex-end;
        }
        .flex-item{
            width: 130px;
            height: 125px;
            margin: 10px;
            background-color: yellowgreen;
        }
    </style>
    <body>
        <div class="flex-container">
            <div class="flex-item one">盒子1</div>
            <div class="flex-item tow">盒子2</div>
            <div class="flex-item three">盒子3</div>
        </div>
    </body>

로그인 후 복사

구조는 다음과 같습니다. 사진에 나와있습니다

# 🎜🎜#

위 내용은 CSS3를 사용하여 유연한 상자 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!