유연한 상자 레이아웃 소개(코드 포함)

이 글은 유연한 박스 레이아웃(코드 포함)을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

유연한 레이아웃

유연한 레이아웃, '유연한 레이아웃'이라고도 함

유연한 레이아웃

• 을 사용하여 상위 컨테이너에 display: flex/inline-flex; 속성을 추가하면 컨테이너 콘텐츠가 유연한 레이아웃으로 표시될 수 있습니다. 일반 문서를 따르지 않고 흐름의 표시 모드

• 컨테이너에 탄력적 레이아웃을 추가한 후 컨테이너 콘텐츠만 탄력적 레이아웃을 채택하지만 컨테이너의 위치 지정 방법은 문서 흐름 자체는 여전히 일반 문서 흐름을 따릅니다.

• display:flex; 컨테이너에 유연한 레이아웃을 추가한 후에는 블록 수준 요소로 표시됩니다.

display: inline-flex; 컨테이너에 유연한 레이아웃을 추가하면 행 수준 요소로 표시됩니다.

# 🎜🎜#
• Flex 레이아웃으로 설정한 후에는 하위 요소의 부동, 투명 및 수직 정렬 속성이 유효하지 않습니다. 그러나 위치 속성은 여전히 ​​유효합니다.

코드는 다음과 같습니다:

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
    .box{
        display: flex;
    }
    .box p{
        height: 50vh;
        flex: 1;
    }
    .box p:nth-child(1){
        background: gray;
    }
    .box p:nth-child(2){
        background: green;
    }
    .box p:nth-child(3){
        background: pink;
        flex: 3;
    }
    .box p:nth-child(4){
        background: red;
    }
        
    .box p:nth-child(5){
        background: yellow;
    }
    </style>


    <p>
        </p><p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    

렌더링:

# 🎜🎜 #

관련 추천:

탄력적 레이아웃이란 무엇인가요? 유연한 레이아웃 Flex의 기본 적용(코드 포함)

HTML의 유연한 레이아웃(Flex) 소개(코드 포함)

위 내용은 유연한 상자 레이아웃 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!