WeChat 개발을 위한 Flex 레이아웃에 대한 자세한 설명-위챗 개발-php.cn

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

零下一度

풀어 주다： 2017-05-20 16:40:23

원래의

2211명이 탐색했습니다.

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

WeChat 개발을 위한 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 표시효과 :

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

으로 변경

디스플레이 효과:

display:flex

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

렌더링에서

와

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

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

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

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

이 반드시

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

의 4가지 선택 값이 있습니다. right 가로방향이 주축
row
: 오른쪽에서 왼쪽 가로방향이 주축
row-reverse
: 위에서 아래 세로 방향이 주축
column
아래에서 위로 세로 방향이 주축
column-reverse

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

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

그림의 예는 다양한

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

예제 코드: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>

로그인 후 복사

실행 효과:

WeChat 개발을 위한 Flex 레이아웃에 대한 자세한 설명
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