WeChat 미니 프로그램 Flex 레이아웃

WeChat 미니 프로그램페이지 레이아웃은 Flex 레이아웃을 채택했습니다.
Flex레이아웃은 W3c에서 2009년에 제안한 새로운 솔루션으로 다양한 페이지 레이아웃을 간단하고 완전하며 반응적으로 구현할 수 있습니다.
Flex 레이아웃은 정렬, 방향, 순서 등의 요소를 제공합니다.
Flex 레이아웃의 주요 기능은 다양한 화면 크기에 가장 적합한 방식으로 적절한 공간을 채우도록 하위 요소를 조정하는 기능입니다.

flex 레이아웃

Flex 레이아웃의 기능:

• 왼쪽, 오른쪽, 모든 방향으로 늘이기 아래, 위

• 스타일 레이어에서 순서를 변경하고 재배치할 수 있습니다

• 주축과 교차축이

• 공간 확장 및 하위 요소 채우기

• 컨테이너를 따라 정렬

WeChat 애플릿 구현

레이아웃. WeChat 애플릿의 Flex 레이아웃 사용을 간략하게 소개하겠습니다. Flex

텔레스코픽 컨테이너

에는 <a href="." cn target="_blank">display<p>:flex</p></a> 또는 <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:flex 요소는 display:block(유연한 컨테이너) 내부에서 flex container의 하위 요소가 호출됩니다. flex item(유연한 항목) 및 flex container의 하위 요소는 모두 항상 내부 블록 컨테이너 모드로 지정된 Flex

• 을 사용하여 배치됩니다. WeChat 애플릿의 display:blockview 컨테이너(view, scroll-view 및 swiper)는 모두 dispaly:block

입니다. >: in을 지정합니다. -line 컨테이너 모드에서는

• 속성 display:flex을 사용하여 flex-wrap에 세 가지 값이 있습니다. nowrap(줄 바꿈 없음) ,flex-wrapwrap(줄 바꿈),wrap-reverse(줄 바꿈의 첫 번째 줄은 아래에 있음)를 사용하는 코드(기본값):

  <view class="flex-row" style="display: block;">
        <view class="flex-view-item">1</view>
        <view class="flex-view-item">2</view>
        <view class="flex-view-item">3</view>
    </view>

  
  표시 효과: display:block

차단

표시 효과가

으로 변경됨:

display:flex

flex

렌더링에서

와

의 차이점을 확인할 수 있습니다. 하위 요소

가 새 줄(block) 또는 인라인(flex) viewblock주축 및 교차축 flex

레이아웃의 플렉스 컨테이너는 어떤 방향으로도 배치될 수 있습니다.

컨테이너에는 기본적으로

주축(Flex주
축) 과 교차축(교차축)이라는 두 개의 축이 있습니다. 주축의 시작 위치는 (main start), 주축의 끝 위치는 (main
end主轴起点), 주축의 길이는 主轴终点(메인 사이즈). 마찬가지로 교차축의 시작점은 (cross start), 끝 위치는 主轴长度(cross end), 길이는
(cross size)입니다. 자세한 내용은 아래 그림을 참조하세요. 侧轴起点侧轴终点侧轴长度

Flex-
방향

참고,

일 필요는 없습니다. 마찬가지로
는 主轴일 필요가 없습니다. 从左到右 속성에 의해 제어됩니다. 🎜>侧轴从上到下flex-direction

: 왼쪽에서 오른쪽으로 가로 방향이 주축입니다.

• row

  : 오른쪽에서 왼쪽으로 가로 방향이 주축입니다. 주축

• row-reverse

  : 위에서 아래로 세로 방향이 주축

• column

  아래에서 세로 방향 위쪽이 주축입니다

• column-reverse 가로 방향이 주축이면 세로 방향이 교차축이고 그 반대도 마찬가지입니다.

  4개의 스핀들 방향 설정 렌더링:

예제 이미지
그림의 예는 다양한

값의 배열 방향이 다릅니다.

예제 코드:

<view >
    <view class="flex-row" style="display: flex;flex-direction: row;">
        <view class="flex-view-item">1</view>
        <view class="flex-view-item">2</view>
        <view class="flex-view-item">3</view>
    </view>
    <view class="flex-column" style="display:flex;flex-direction: column;" >
        <view class="flex-view-item">c1</view>
        <view class="flex-view-item">c2</view>
        <view class="flex-view-item">c3</view>
    </view>
</view>

작동 효과: flex-direction

flex-direction

정렬

하위 요소에는 두 가지 정렬 방법이 있습니다.

just<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a>y-conent 기본 축에서 하위 요소 정렬 정의
align-items 측면 축에서 하위 요소 정렬 정의

justify-content5가지 선택적 정렬이 있습니다.

• flex-start 스핀들 시작점 정렬(기본값)

• flex-end 스핀들 끝점 정렬

• center 주축에서 가운데 ​​정렬

• space-between 양쪽 끝에서 정렬됩니다. 단, 양쪽 끝의 하위 요소가 양쪽 끝의 컨테이너에 기대어 있고, 사이의 간격은 다른 자식 요소는 모두 같음

• space-around 각 자식 요소 사이의 거리는 동일하며, 컨테이너 양쪽 끝의 자식 요소 사이의 거리도 동일합니다. 다른 하위 요소 사이.
  justify-content의 정렬은 주축 방향과 관련이 있습니다. 아래 그림에서 flex-direction는 row로 사용되고, 주축 모드는 从左到右, 설명은 입니다. <a href="http://www.php.cn/wiki/48.html" target="_blank">js<code><a href="http://www.php.cn/wiki/48.html" target="_blank">js</a>tify-contenttify-content 5가지 값의 표시 효과:
  

  
  

  justify-content

align-items는 교차 축의 정렬을 나타냅니다.

• stretch 컨테이너 전체 채우기(기본값 )

• flex-start 가로축 시작점 정렬

• flex-end 측면 축 끝점 정렬

• center 횡축 중심 정렬

• baseline 하위 요소

align-tiems설정의 정렬은 교차축 방향과 관련이 있습니다. 아래 그림에서 flex-direction 는 row이고 교차축 방향은 从上到下이며 align-items의 다섯 가지 값의 표시 효과는 다음과 같습니다.

aign-items

주축과 측면축의 방향과 정렬을 설정하면 대부분의 페이지 레이아웃을 구현할 수 있습니다.

위 내용은 WeChat 미니 프로그램 Flex 레이아웃의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!