WeChat 개발을 위한 Flex 레이아웃에 대한 자세한 설명

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

flex 레이아웃

Flex 레이아웃 기능:

• 모든 방향에서 텔레스코픽 가능 , 왼쪽, 오른쪽, 아래, 위

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

• 주축과 옆축은

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

• 컨테이너를 따라 정렬

구성이 편리함 WeChat Mini 프로그램은 Flex 레이아웃을 구현합니다. WeChat 미니 프로그램에서 Flex 레이아웃의 사용을 간략하게 소개하겠습니다.

플렉스 컨테이너

<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:blockdispaly:block

• : 인라인 컨테이너 모드로 지정되며, 하위 요소를 한 줄에 표시합니다.

  속성을 ​​사용하여 display:flex에 래핑할지 여부를 지정할 수 있습니다. 세 가지 값: flex-wrapnowrap(줄 바꿈 안 함)flex-wrap,wrap(줄 바꿈),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 표시효과 :

block

으로 변경

디스플레이 효과:

display:flex

flex

렌더링에서

와

의 차이점을 확인할 수 있습니다. -element block는 새 줄(flex) 또는 인라인(view)에 표시할지 여부입니다. blockflex주축과 교차축

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

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

Flex-direction

이 반드시

을 의미하는 것은 아닙니다. 主轴가 반드시 从左到右일 필요는 없습니다. 주축의 방향은 侧轴 속성에 의해 제어됩니다. 从上到下flex-direction

• 의 4가지 선택 값이 있습니다. right 가로방향이 주축

  row

• : 오른쪽에서 왼쪽 가로방향이 주축

  row-reverse

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

  column

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

  column-reverse

가로 방향이 주축이면 그 세로 방향이 옆축이 되고 그 반대도 마찬가지입니다.

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

예제 이미지

그림의 예는 다양한

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

예제 코드:flex-direction

<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

정렬

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

기본 축에서 하위 요소 정렬 정의

justify-conent 측면 축에서 하위 요소 정렬 정의
align-items

에는 5가지 선택적 정렬이 있습니다.

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

• flex-end 스핀들 끝점 정렬

• center 주축 중앙 정렬

• space-between 양쪽 끝에 정렬, 양쪽 끝의 컨테이너에 가까운 양쪽 끝의 하위 요소를 제외하고, 다른 자식 요소 사이의 간격은 동일

• space-around 각 자식 요소 사이의 거리는 동일하며, 컨테이너 양쪽 끝의 자식 요소 사이의 거리도 동일합니다. 다른 하위 요소 사이의 거리.
  justify-content의 정렬은 주축 방향과 관련이 있습니다. 다음 그림에서는 flex-direction를 row로 사용하고 주축 모드는 从左到右이며 5개 값의 표시 효과를 설명합니다. jstify-content:
  

  
  

  justify-content

align-items는 교차축:

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

• flex-start 교차축 시작점 정렬

• flex-end 교차축

• center의 끝점을 교차축

• 자식 요소의 텍스트 첫 번째 줄에 정렬 baseline

정렬 설정은 교차축 방향과 관련이 있습니다. align-tiems을 flex-direction으로 사용하고, 교차축 방향은 row이며, 从上到下 값 표시 효과의 5가지를 설명합니다. align-items

aign -items

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

[관련 추천]

1.

위챗 공개계정 플랫폼 소스코드 다운로드

Xiaozhu CMS Life Tong O2O system v2. 0 독점판 다운로드

3.

Little Pigcms(pigcms) WeChat Marketing System V8.52 Pinhaohao Mall 2차 개발 특별판

위 내용은 WeChat 개발을 위한 Flex 레이아웃에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!