WeChat 미니 프로그램 Flex 레이아웃-미니 프로그램 개발-php.cn

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

PHPz

풀어 주다： 2017-04-04 11:54:04

원래의

1850명이 탐색했습니다.

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

WeChat 미니 프로그램 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
속성 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

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

표시 효과가

으로 변경됨:

display:flex

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

렌더링에서

와

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

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

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

컨테이너에는 기본적으로

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

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

참고,

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

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

row
: 오른쪽에서 왼쪽으로 가로 방향이 주축입니다. 주축
row-reverse
: 위에서 아래로 세로 방향이 주축
column
아래에서 세로 방향 위쪽이 주축입니다
column-reverse 가로 방향이 주축이면 세로 방향이 교차축이고 그 반대도 마찬가지입니다.
4개의 스핀들 방향 설정 렌더링:

예제 이미지 WeChat 미니 프로그램 Flex 레이아웃
그림의 예는 다양한

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

예제 코드:

<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

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

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