위 챗 애플 릿 flexbox layot 기본 레이아웃 을 빠르게 실현 하 는 솔 루 션

문제 설명
flexbox layot-탄성 상자 레이아웃.탄성 상 자 는 작은 프로그램 을 빠르게 배치 할 수 있다.일반적인 전통 적 인 애플 릿 레이아웃 방법 은 내 용량 이 적은 페이지 에 편리 하지만 페이지 가 복잡 한 것 에 있어 서 는 매우 번거롭다.그래서flexbox layout 를 사용 하여 애플 릿 페이지 의 내용 을 전체적으로 밀봉 하고 배치 하면 편리 하면 서도 빠르다.그렇다면 어떻게 탄성 상 자 를 사용 하여 애플 릿 의 기본 구 조 를 신속하게 실현 합 니까?
전통 적 인 레이아웃 방식 은 레이아웃 목표 의 실현 속성 할당 에 대해 매우 분산 되 고 내용 의 크기 와 페이지 의 구조 에 심각하게 의존 하기 때문에 이렇게 조작 하 는 것 은 매우 번거롭다.한편,탄성 상 자 는 비교적 유연 하고 통일 되 어 전체 페이지 의 구 조 를 전체적으로 제어 할 수 있다.탄성 상 자 는 페이지 의 내용 을 한 용기 에 전체적으로 넣 고 전체적인 구조 적 인 레이아웃 설정 을 하여 페이지 를 더욱 조 화 롭 게 하 는 것 이다.
해결 방안
우선flexbox layout 의 사용 방법 에 대해 간단히 소개 한다.
먼저 필요 한 패 키 징 내용 을 view 용기 에 넣 고 이 view 용기 에 class 를 정의 합 니 다.그리고 wxss 에서 class 를 설정 해 야 합 니 다.
wxss 에 서 는 먼저 view 용 기 를 탄성 상자 로 바 꾸 지만 탄성 상자 의 기본 주축 방향 은 왼쪽 에서 오른쪽으로 이기 때문에 모든 요 소 는 왼쪽 에서 오른쪽으로 배치 합 니 다.자신의 필요 에 따라 주축 의 방향 을 수정 하 다.
여 기 는 위 에서 아래로 내 려 오 는 주축 방향,수직 방향 에서 고 르 게 분포 되 고 원 소 는 수평 방향 에서 가운데 로 나타 나 는 것 을 예 로 들 수 있다.wxs 에 서 는 flex-direction:column 으로 위 에서 아래로 구 조 를 실현 합 니 다.그러나 단락 과 단락 사이 가 너무 촉박 한 것 을 발견 할 수 있 습 니 다.이 럴 때 단락 을 고 르 게 분포 시 키 고 justify-content:space-around 로 실현 해 야 합 니 다.(메모:justify-content 를 사용 할 때 우 리 는 자신 이 설정 한 레이아웃 방향 에 따라 페이지 의 높이(너비)를 조정 해 야 합 니 다.작은 프로그램 은 당신 이 설정 한 단락 간 의 공간 에 따라 조정 합 니 다.)마지막 으로 원 소 를 수평 방향 에서 가운데 로 표시 하려 면 display ： flex 으로 실현 해 야 한다.
다음은 두 개의 탄성 상자(하 나 는 수직 방향 이 고 다른 하 나 는 수평 방향)로 구 조 된 사례 코드 입 니 다.
표 3.1.wxml 코드

<view>
<image src="/pages/img/     2.jpg"></image>
<text>      </text>
<text>    ！   ！ </text>
<text>     ！    ！ </text>
</view>
<view>
<text>    ，    </text>
<text>    ，    </text>
<text>    ，    </text>
<text>    ，    </text>
<text>    ，    </text> 
</view>

표 3.2.wxss 코드

.container1{
height: 80vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
color: red;
background-color: yellow
}
.container2{
background-color: yellow;
height: 20vh;
width: 70vh;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
color:blue
}
.view1{
height: 650rpx;
width: 550rpx
}

효과 도 표시:

그림 3.1align-items ： center 의 속성 에 대한 정리:
탄성 상자 레이아웃 은 6 대 속성 이 있 습 니 다:
(1)flex-direction 속성 은 주축 의 방향 을 결정 한다.
row(기본 값):주축 은 수평 방향 이 고 출발점 은 왼쪽 에 있 습 니 다.
row-reverse:주축 은 수평 방향 이 고 출발점 은 오른쪽 끝 에 있 습 니 다.
column:주축 은 수직 방향 이 고 출발점 은 위 에 있 습 니 다.
column-reverse:주축 은 수직 방향 이 고 출발점 은 아래 에 있 습 니 다.
(2)flex-wrap 속성 은 요소 의 줄 바 꿈 을 결정 합 니 다.
nowrap(기본 값):줄 을 바 꾸 지 않 습 니 다.
wrap:줄 바 꾸 기,첫 번 째 줄 은 위 에 있 습 니 다.
wrap-reverse:줄 을 바 꾸 고 첫 줄 은 아래 에 있 습 니 다.
(3)flex-flow 속성 은 flex-direction 속성 과 flex-wrap 속성의 약자 형식 이다.
(4)justify-content 속성 정의 내용 이 주축 에 있 는 정렬 방식.
flex-start(기본 값):왼쪽 정렬.
flex-end:오른쪽 정렬.
센터:가운데.
space-between:양 끝 을 정렬 하고 프로젝트 간 의 간격 이 같 습 니 다.
space-around:각 항목 양쪽 의 간격 이 같 습 니 다.
(5)align-items 속성 정의 항목 이 교차 축 에서 어떻게 정렬 되 는 지.
flex-start:교차 축의 출발점 정렬.
flex-end:교차 축의 종점 정렬.
center:교차 축의 중심 점 정렬.
baseline:프로젝트 의 첫 줄 텍스트 의 기본 줄 정렬.
stretch(기본 값):항목 이 높이 를 설정 하지 않 거나 auto 로 설정 되 어 있 으 면 전체 용기 의 높이 를 차지 합 니 다.
(6)align-content 속성 은 여러 축선 의 정렬 방식 을 정의 합 니 다.
flex-start:교차 축의 출발점 과 정렬 합 니 다.
flex-end:교차 축의 종점 과 정렬 합 니 다.
center:교차 축의 중심 점 과 정렬 합 니 다.
space-between:교차 축 양 끝 과 일치 하고 축선 간 의 간격 이 평균 적 으로 분포 합 니 다.
space-around:모든 축선 양쪽 의 간격 이 같 습 니 다.따라서 축선 간 의 간격 은 축선 과 테두리 의 간격 보다 배가 크다.
stretch(기본 값):축선 이 전체 교차 축 을 차지 합 니 다.
결어 flexbox layout 탄성 상자 의 배치 이상 은 간단 한 용기 속성 만 소개 했다.위의 소개 와 코드 예 를 통 해 알 수 있 듯 이 이 를 통 해 페이지 레이아웃 에 매우 편리 하고 빠 르 며 쓴 코드 도 매우 간단 하 다.탄성 상자 의 용기 속성 을 파악 하면 애플 릿 의 페이지 레이아웃 을 쉽게 돌 릴 수 있 고 효율 적 이 며 간단 합 니 다.
위 챗 애플 릿 flexbox layot 가 기본 레이아웃 을 빠르게 실현 하 는 솔 루 션 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 애플 릿 flexbox layot 레이아웃 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!