위 챗 애플 릿 입문 3 의 Flex 레이아웃

？닥 친 문제

1.tabBar 전환,네 비게 이 션 바 의 제목 을 바 꾸 어 페이지 의.json 에서 작성 합 니 다.루트 노드 에 쓰 세 요.뱀 을 그 리 는 데 windows 노드 를 추가 하지 마 세 요!

{
  "navigationBarTitleText": "    ",
}

2.로 컬 그림 을 View 태그 배경 그림 으로 직접 설정 할 수 없습니다.위 챗 오류 알림:로 컬 자원 그림 은 WXSS 를 통 해 얻 을 수 없고 네트워크 그림 이나 base 64 를 사용 하거나 탭 을 사용 할 수 있 습 니 다.솔 루 션:1.네트워크 그림 사용:background-image:url(")https://xxxx/xxx.jpg“); 2.배경 그림 을 인 코딩 base 64 로 변환(단점 은 큰 난 장 판,읽 기 불편)이 사이트 에서 진행 할 수 있 습 니 다.http://www.css-js.com/tools/base64.html 변환:예 를 들 어 background-image:url("변환 후 얻 은 인 코딩 텍스트")을 여러 번 사용 하면 이 값 을 전역 변수 로 설정 하고 js 파일 에서 참조 하면 됩 니 다.3.image 구성 요 소 를 사용 하여 배경 그림 을 제거 합 니 다.

！UI 레이아웃 기반
Flex 레이아웃(유동 레이아웃 의 모든 기능 을 실현 할 수 있 음),상대 적 인 포 지 셔 닝 과 절대적 인 포 지 셔 닝
Flex 레이아웃
전체 회색 사각형 은 용기 이 고 item 1 과 2 는 하위 요소 입 니 다.주축 과 교차 축의 방향 을 사용자 정의 할 수 있 습 니 다.
속성-Flex 용기 속성-flex-direction 은 요소 의 배열 방향 을 결정 합 니 다.-flex-wrap 은 요소 가 줄 을 바 꾸 는 방법 을 결정 합 니 다.(배열 이 내 려 가지 않 을 때)-flew-flow flew-direction 과 flew-wrap 의 약자-justify-content 요소 가 주축 에서 정렬 하 는 방식-align-items 요소 가 교차 축 에서 정렬 하 는 방식-Flex 요소 속성-flex-grow 여유 공간 이 있 을 때,원소 의 증폭 비례-flew-shrink 공간 이 부족 할 때 원소 의 축소 비례-flew-basis 원소 가 주축 에서 차지 하 는 공간-flex 는 grow,shrink,basis 의 약자-order 정의 원소 의 배열 순서-align-self 정의 원소 자체 의 정렬 방식(이 속성 은 용기 의 justify-content 와 align-items 속성 을 덮어 쓰 는 작용)
자,실천 하 자!
app.json 스타일 삭제,

/**index.wxml**/
class="container">
  class="item">
  1
  
  class="item">
  2
  
  class="item">
  3
  
  class="item">
  4
  

/**index.wxss**/
.container{
  height: 100%;
  width: 100%;
  background-color: fuchsia;
}
.item{
  width: 100rpx;/*            ，          */
  height: 100rpx;
  border: 1px solid #fff;
}

효과 그림 1:
flex 용기 로 변경

/**index.wxss**/
.container{
  height: 100%;
  width: 100%;
  background-color: fuchsia;
  display: flex; //    flex  
}

.item{
  width: 100rpx;/*            ，          */
  height: 100rpx;
  border: 1px solid #fff;
}

효과 그림 2:
ok,우리 가 뭘 이해 한 것 같 아!!!작은 프로그램의 View 라벨 은 div 와 유사 합 니 다.div 는 블록 요소 입 니 다.블록 요 소 는 한 줄 의 폭 을 차지 합 니 다.flex 는 css 와 유사 한 유동 기능 으로 블록 요 소 를 줄 내 요소 로 바 꾸 고 모든 요 소 를 한 줄 로 밀 어 냅 니 다.
자,이제 우 리 는 다른 용기 속성의 용법 을 계속 실천 합 시다.
우 리 는 다음 줄 을 추가 합 니 다.

  flex-direction: row;

네,효과 가 똑 같 아 요.요소 의 배열 방향 이 기본적으로 줄 에 따라 배열 되 어 있 음 을 설명 합 니 다.우 리 는 row 를 column 으로 바 꾸 고 효 과 는 그림 과 같 습 니 다(세로 배열).ok,flex-direction 속성 은 주축 과 교차 축의 위 치 를 결정 하 는 것 입 니 다.row 는 왼쪽 에서 오른쪽으로 주축 이 고 column 은 위 에서 아래로 주축 이 며 row-reverse 는 오른쪽 에서 왼쪽으로 주축 이 고 column-reverse 는 아래 에서 위로 주축 입 니 다.
flex-wrap:요소 가 줄 을 바 꾸 는 방법 을 결정 합 니 다(배열 이 내 려 오지 않 을 때)선택 할 수 있 는 값:nowrap,row,row-reverse,각각 줄 을 바 꾸 지 않 고 줄 을 바 꾸 지 않 습 니 다.기본적으로 줄 을 바 꾸 지 않 습 니 다.view 의 수량 을 아무리 늘 려 도 기본적으로 한 줄 로 좁 혀 서 view 의 폭 을 압축 합 니 다.
justify-content 요 소 는 주축 에서 정렬 하 는 방식 으로 선택 할 수 있 습 니 다.flex-start,flex-end,center,space-around,space-between 은 각각 왼쪽 정렬,오른쪽 정렬,가운데 정렬,각 요소 의 양쪽 간격 이 같 고 양쪽 정렬 중간 에 있 는 모든 요소 의 간격 이 같 습 니 다.
align-items 요 소 는 교차 축 정렬 방식 에서 선택 할 수 있 습 니 다.flex-start,flex-end,center,stretch,baseline 은 각각 왼쪽 정렬,오른쪽 정렬,가운데 정렬,요소 가 높이 를 설정 하지 않 으 면 용기 의 높이(주축 이 row 또는 row-reverse 일 때)를 차지 하고 문자 의 기선 에 따라 정렬 합 니 다.
하하,baseline 이해 못 하 겠 어 요.그래서 밤 을 드 세 요!!우선,만약 필요 한 것 이 있다 면–view 안의 문자 의 위 치 를 조정 하고 ok,코드 와 효과 도 를 봅 니 다.

/**index.wxml**/
class="container">
  class="item">
  1
  
  class="item">
  2
  
  class="item i3">
  3
  
  class="item">
  4
  

/**index.wxss**/
.container{
  height: 100%;
  width: 100%;
  background-color: cornflowerblue;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.item{
  width: 100rpx;/*            ，          */
  height: 100rpx;
  background-color: fuchsia;
  border: 1px solid #fff;

}

.i3{
  display: flex;
  align-items: flex-end;
}

세 번 째 view 에 하나의 스타일 을 추가 하여 flex 용기 가 되 고 요소(즉 문자)의 위 치 를 아래 에 있 습 니 다.효과 도 3:
ok,이때 우리 가 align-items:flex-start;align-items:baseline 으로 변경 하기;효과 도 4:
어 때?!좀 이해 하기 쉬 운 지,바로 문자 기선 에 따라 배열 한 것 이다.
플 렉 스 용기 의 속성 을 말 하고 플 렉 스 요소 의 속성 을 연구 합 시다!!!!!!!!!!!!!!!!!!!!!!
flex-grow 여유 공간 이 있 을 때 요소 의 확대 비율;기본 요소 의 크기 를 지정 하면 용기 에 공간 이 남아 도 용기 의 공간 을 차지 하지 않 습 니 다.즉,flex-grow:0 입 니 다.만약 에 우리 가 값 을 1 로 설정 하면 요 소 는 남 은 공간 을 차지 합 니 다.
flew-shrink 공간 이 부족 할 때 요소 의 축소 비율.기본 값 은 1,0 으로 줄 어 들 지 않 습 니 다.압축 가중치 와 같은 다른 값 도 있 고 비례 에 따라 압축 할 수 있다.
flew-basis 요소 가 주축 에서 차지 하 는 공간 입 니 다.구체 적 인 크기 를 지정 합 니 다.rpx 가 효과 가 없 는 것 같 습 니 다.px 가 가능 합 니 다.
order 는 요소 의 배열 순 서 를 정의 합 니 다.값 은 색인 값 입 니 다.1 부터 시작 합 니 다.
align-self 는 요소 자체 의 정렬 방식 을 정의 합 니 다.이 테스트 는 효과 가 없 는 것 같 습 니 다.이 유 는 container 용기 가 페이지 를 가득 채 우지 않 았 기 때 문 일 수도 있 습 니 다.??!!!!!
상대 포 지 셔 닝 과 절대 포 지 셔 닝
상대 적 으로 포 지 셔 닝 하 는 요 소 는 자신의 왼쪽 상단 에 대해 포 지 셔 닝 을 하 는 것 이 고 참고 물 은 자신 이다.절대 포 지 셔 닝 요 소 는 가장 가 까 운 부모 급 요소 에 비해 포 지 셔 닝 을 하 는 것 입 니 다.
플 렉 스 포석 이 대단 한데 왜 이 걸 배 워!!!??한 가지 상황 이 있 기 때문에 두 요소 사이 에 중첩 과 커버 가 필요 하 다 면!!플 렉 스 포석 은 못 하 잖 아!!!
상대 적 으로 위치 잡 은 밤 을 들 어 라!

<view class="container">
  <view class="item">
  1
  view>
  <view class="item">
  2
  view>
  <view class="item i3">
  3
  view>
  <view class="item">
  4
  view>
view>
/**index.wxss**/
.container{

  width: 100%;  
  height: 100%;
  background-color: cornflowerblue;
  display: flex;
  flex-direction: column;
}
.item{
  width: 100rpx;/*            ，          */
  height: 100rpx;
  background-color: fuchsia;
  border: 1px solid #fff;

}
.i3{
  position: relative;
  left: 130rpx;
  top:30rpx;
}

효과 도 5:
절대 포 지 셔 닝 밤 을 들 어 라!

<view class="container">
  <view class="item">
  1
  view>
  <view class="item">
  2
  view>
  <view class="item i3">
  3
  view>
  <view class="item">
  4
  view>
view>
/**index.wxss**/
.container{

  width: 100%;  
  height: 100%;
  background-color: cornflowerblue;
  display: flex;
  flex-direction: column;
}

.item{
  width: 100rpx;/*            ，          */
  height: 100rpx;
  background-color: fuchsia;
  border: 1px solid #fff;

}

.i3{
  position: absolute;
  left: 130rpx;
  top:30rpx;
}

효과 도 6:
ok,용법 은 모두 간단 합 니 다.구체 적 인 요소 에 position 속성 을 설정 하고 relative 또는 absolute 로 지정 하면 됩 니 다.