모바일 단말기의 플렉스 3열 레이아웃 관련 지식 소개(코드 예시)

이 기사는 모바일 단말기의 플렉스 3열 레이아웃(코드 예제)에 대한 관련 지식을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .

기본적으로 모바일 단말기가 먼저 표시되며, @media 속성

flexbox 관련 CSS 속성을 사용하여 화면 변경을 적용합니다.# 🎜🎜#

1. display: flex; (상위 요소)

2. flex-wrap: nowrap | ;(상위 요소 및 하위 요소가 제한을 초과하는 경우 어떻게 표시해야 합니까?)

3. flex: flex-grow flex-shrink flex-basis; 하위 요소 및 하위 요소에 할당)#🎜 🎜#

order: number; (하위 요소, 하위 요소의 순서 정렬 방법)
Key points#🎜🎜 #

상위 요소에 설정

display: flex
1. 및 #🎜🎜 #flex-wrap: Wrap

   #🎜🎜 # flex

   을 사용하여 하위 요소의 공간 할당을 조정합니다(확장, 축소 비율 및 기본 값 조정)

2. # 🎜🎜#order을 통해 하위 요소의 표시 순서를 조정합니다. (

   .center
을 입력하세요. 중간)

3. #🎜 🎜#ExampleCSS

       .box {
           display: flex;
           flex-wrap: wrap;
           text-align: center;
       }
       .center {
           background-color: #f00;
           flex: 100% 1;
       }
       .left, .right {
           flex: 100% 1;
       }
       .left {
           background-color: #0f0;
       }
       .right {
           background-color: #00f;
       }
       @media all and (min-width: 400px) {
           .left, .right {
               flex: 50% 1;
           }
       }
       @media all and (min-width: 800px) {
           .box {
               flex-wrap: nowrap;
           }
           .center {
               order: 2;
               flex: 1;
           }
           .left, .right {
               flex: 0 0 300px;
           }
           .left {
               order: 1;
           }
           .right {
               order: 3;
           }
       }

HTML

#🎜🎜 #

<div class="box">
    <div class="center">
        弹性盒子是 CSS3 的一种新的布局模式。
        CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
        引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

위 내용은 모바일 단말기의 플렉스 3열 레이아웃 관련 지식 소개(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!