Flex 레이아웃 모드는 소규모 프로그램 개발에 필수적입니다.

wxflex

WeChat 애플릿의 Flex 레이아웃 데모 - 필수적이고 일반적으로 사용되는 4가지 Flex 레이아웃 모드

코드 라이브러리

github 주소: github.com/icindy/wxflex

공식적으로 권장되는 Flex 레이아웃

Flex 레이아웃은 기존의 float과 비교됩니다. 레이아웃이 간단하고 빠르며 편리합니다. Flex 레이아웃을 마스터하면 WeChat 미니 프로그램을 만들 때 wxss 코드를 줄일 수 있으며 WeChat 미니 프로그램 개발을 위한 문서 요구 사항도 충족합니다

이 코드에는 4개의 Flex 레이아웃이 포함됩니다. 방식으로, 서로 다른 플렉스의 서로 다른 속성 이 각각 사용됩니다.
관련 속성을 배우려면 이 글 마지막에 있는 학습 참고 자료를 읽는 것이 좋습니다

주사위 레이아웃

주사위 레이아웃은 주로 여러 속성의 사용을 강조합니다display justify-content align-items align-selfetc

.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

.second-face {
  display: flex;
  justify-content: space-between;
}

.second-pip-2 {
  align-self: flex-end;
}

그리드 레이아웃

주로 의존 플렉스 속성

.Grid {
  display: flex;
}
.Grid-cell {
  flex: 1;
}

퍼센트 레이아웃

.Grid {
  display: flex;
}

.cell-u-full {
  flex: 0 0 100%;
}

흐르는 레이아웃

9각형 그리드, 폭포수 흐름 등의 효과 연출

.parent {
  width: 100%;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}

[관련 추천]

1. 위챗 미니 프로그램 전체 소스코드 다운로드

2. 위챗 미니 프로그램 앱스토어 소스코드 추적

위 내용은 Flex 레이아웃 모드는 소규모 프로그램 개발에 필수적입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!