WeChat 애플릿 개발에 대한 자세한 소개

1: Flex 레이아웃

Flex 레이아웃은 그림 1과 같습니다.

사진 1

1.1 Flex 컨테이너 속성

정의된 경우 align은 컨테이너 속성의 justify-content와 align-items에 의해 설정된 속성을 덮어씁니다

WeChat

애플릿 개발 프로젝트에서 새로운 파일 레이아웃을 생성한 후 다양한 파일(레이아웃 이름을 따서 명명)을 생성합니다.

layout.wxml에 다음 코드를 추가합니다.

<view class="container1">

<view class="item1">
1
</view>

<view class="item1">
2
</view>

<view class="item1">
3
</view>

<view class="item1">
4
</view>

</view>

레이아웃에 다음 코드를 추가합니다. .wxss:

.container1{
    height: 100%;
    width:100%;
    
}


.item1{
    height:100rpx;
    width:100rpx;
    background-color:cyan;
    border: 1px solid #fff
}

그림 2와 같이 컴파일 및 실행

참고: 4가 추가됩니다. 위 코드의 컨테이너1 컨테이너에 하위 요소 뷰(item1)에서 각 item1의 너비와 높이는 item1의 스타일 파일에 고정된 값으로 설정됩니다. 100rpx는 화면 크기와 관련된 배율 단위입니다. . 각 item1의 측면이 1px입니다. 선(solid), 흰색(#fff)

.container1을 다음과 같이 수정합니다. (display:flex; 추가) 컴파일 및 실행은 그림 3과 같습니다. flex 레이아웃이 요소의 기본 수평 배열임을 알 수 있습니다.

아아앙

1.1.1 컨테이너 속성: flex-direction

.container1에 다음 코드를 추가합니다. 그림 2와 같이 요소를 수직으로 정렬하도록 플렉스 레이아웃을 설정합니다(교차축은 왼쪽에서 오른쪽으로, 기본 축은 위에서 아래로). (행: 플렉스 레이아웃은 요소를 수평으로 배열합니다. --- 주축은 왼쪽에서 오른쪽으로, 교차축은 위에서 아래로)

플렉스 방향 :열

1.1.2 컨테이너 속성: flex-wrap

.container1에 다음 코드를 추가합니다. 동시에 레이아웃.wxml의 요소 코드를 8개 요소 뷰에 복사하고 컴파일하고 실행하면 그림 4와 같은 효과가 표시됩니다. 원래 높이와 너비는 100rpx이고 정사각형 뷰는 직사각형으로 바뀌었습니다.

flex-wrap:nowrap

다음 코드로 수정한 경우: 그림 5와 같이 컴파일하고 실행합니다. 각 하위 뷰가 정사각형인지 확인한 후 맞지 않는 8번째 하위 뷰를 다음 줄에 넣습니다.

flex-wrap:wrap

1.1.3 컨테이너 속성: flex-flow

flex-flow : Wrap row , 컴파일 및 실행 결과: 그림 5에 표시된 것처럼 flex-flow는 flex-direction과 flex-wrap

< 두 가지 속성의 조합과 동일합니다. 🎜>1.1 .4 컨테이너 속성: justify-content

.container1에 다음 코드를 추가합니다. 그림 6과 같이 컴파일하고 실행합니다. 위 코드에서 flex-flow: Wrap row---를 주축의 정렬로 지정했기 때문에 주축이 왼쪽에서 오른쪽으로 되는 것과 동일하므로 8번째 요소는 정렬할 수 없습니다. 한 줄에 표시된다는 것은 다음 줄 중앙에 표시되고, 처음 7개 하위 뷰도 행 중앙에 표시되며 왼쪽과 오른쪽에 공백이 있습니다

정의-내용:센터

justify-content:flex-end (주축이 왼쪽에서 오른쪽인 경우: 오른쪽 정렬)

컴파일 및 실행 효과는 그림 7에 나와 있습니다.

justify-content:flex-start (주축이 왼쪽에서 오른쪽인 경우: 왼쪽 정렬) 예시는 표시되지 않음

justify-content:space-around ---효과는 그림 8과 같습니다. 각 하위 뷰에는 왼쪽과 오른쪽에 여백이 있습니다

justify-content:space-between---효과는 그림 9에 표시되어 있으며 각 하위 뷰에는 왼쪽과 오른쪽 가장자리가 있지만 첫 번째와 마지막 두 뷰는 가장자리 없이 왼쪽과 오른쪽으로 정렬됩니다. 가장자리를 남겨두세요

1.1.5容器属性：align-items

上面已经很详细讲解主轴上的对齐方式，这里关于这个交叉轴上的对齐方式同理很简单，就不详细展开了。

1.2.1 容器内元素属性：flex-grow

layout.wxml中修改代码如下：增加i3

<view class="item1 i3">
3
</view>

layout.wxss中修改代码如下：在item1中增加： flex-grow: 1，增加i3，表示在一行中如果有剩余空间的话，i3之外的子view占1份空间，而i3子view占2份空间，编译运行效果如图10所示：可以看出i3view所占据的空间比其余3个子view大，但是没有到2倍

.item1{
    height:100rpx;
    width:100rpx;
    
    border: 1px solid #fff;
    flex-grow: 1
}

.i3{
    flex-grow: 2
}

1.2.2容器内元素属性：flex-shrink

layout.wxml再增加4个子view

layout.wxss中修改代码如下：i3的flex-shrink为0，其余子view为1，这表示当空间不足时所有子view都等比缩小，但是i3的view保持大小不变，编译运行，效果如图11所示

.item1{
    height:100rpx;
    width:100rpx;
    
    border: 1px solid #fff;
    flex-shrink: 1
}


.i3{
    flex-shrink: 0
}

更多WeChat 애플릿 개발에 대한 자세한 소개相关文章请关注PHP中文网！