프런트 엔드 개발의 유연한 레이아웃을 자세히 설명 (코드 및 데모 효과 포함)

WeChat 애플릿을 개발할 때 기본적으로 페이지를 레이아웃해야합니다. 많은 레이아웃 방법이 있습니다. 플렉스 레이아웃은 기본적으로 우리의 모든 요구를 해결할 수 있으며 간단하고 배우기 쉽습니다.
Flex는 Flexible Box의 약어로, 박스 모델에 최대한의 유연성을 제공하는 데 사용되는 "유연한 레이아웃"을 의미합니다.
플렉스 레이아웃의 핵심은 컨테이너에 있습니다. 기본적으로 두 개의 축이 있습니다. 하나는 가로 주축이고 다른 하나는 전체 컨테이너를 지원하는 세로 교차 축입니다.
모든 컨테이너를 플렉스 레이아웃으로 지정할 수 있습니다.

.body {
    
    
  display: flex;
}

이러한 방식으로 컨테이너의 플렉스 유형 레이아웃을 설정합니다. 플렉스 레이아웃의
중요한 속성은 다음과 같습니다.

• 플렉스 방향
• 플렉스 랩
• 플렉스 흐름
• 정당화 내용
• 정렬 항목
• 내용 정렬

플렉스 방향 속성

플렉스 방향은 주축의 방향을 결정합니다.
선택할 수있는 4 개의 값이 있습니다.

• 행 (기본값) : 주축은 수평이고 시작점은 왼쪽 끝입니다.
• 행 반전 : 주축은 수평 방향이고 시작점은 오른쪽 끝입니다.
• 기둥 : 주축은 수직 방향이고 시작점은 위쪽 가장자리에 있습니다.
• 열 반전 : 주축은 수직 방향이고 시작점은 하단 가장자리에 있습니다.
  간단한 사용 사례를 작성합니다.

<view class="body">
  <view></view>
  <view></view>
</view>

.body > view {
    
    
  background-color: red;
  width: 100rpx;
  height: 100rpx;
  margin: 20rpx;
}

우리는 단순히 두 개의 뷰를 쓰고, 효과를보기 위해 우리를 용이하게하기 위해 그들에게 폭, 높이 및 배경 색상을 설정 기본 효과로 다음과되도록 우리는 부모 뷰에있는 모든 레이아웃 작업을하지 않았다.

뷰가 있기 때문에 블록 요소, 당연히 두 뷰가 별도의 라인에 있으며 서로 위에 배치됩니다.
그런 다음 WXSS의 상위 뷰에 다음 코드를 추가합니다.

.body {
    
    
  display: flex;
  flex-direction: row;
}

이제 효과를 다시 살펴 보겠습니다.

두 뷰가 동일한 행에 있고 왼쪽과 오른쪽으로 정렬되었습니다. flex-direction : row, row는 수평 레이아웃을 설정했기 때문에 실제 효과는 이론적 결과와 일치합니다.

플렉스 랩 속성

flex-wrap은 컨테이너의 한 줄이 정렬되지 않고 줄 바꿈이 필요한 상황입니다.
선택 가능한 값은 다음과 같습니다.

• Nowrap
• 싸다
• wrap-reverse
  가 설정되지 않은 경우 기본적으로 flex-warp의 값은 nowarp입니다.
  코드로 시연 해 보겠습니다.

<view class="body">
  <view>1</view>
  <view>2</view>
  <view>3</view>
  <view>4</view>
  <view>5</view>
  <view>6</view>
  <view>7</view>
  <view>8</view>
</view>

.body {
    
    
  display: flex;
  flex-direction: row;
}
.body > view {
    
    
  width: 100rpx;
  height: 100rpx;
  background-color: red;
  margin: 20rpx;
  font-size: 50rpx;
}

이것은 설정이없는 효과입니다.

기본적으로 flex-warp의 값이 이제 arp이기 때문에 이러한 뷰가 변형되고 너비가 100rpx가 아님을 알 수 있습니다. 왜냐하면 기본적으로 flex-warp의 값은 이제 arp이므로 매우 순종적이며 래핑하지 않고 함께 압착 만 할 수 있습니다.
다음으로 flex-warp의 값을 warp로 설정하고 효과를 살펴 봅니다.

한 줄에 남아있는 위치의 너비가 100rpx 미만일 때 줄 바꿈을 수행하는 것을 볼 수 있습니다. flex-warp : warp.
다음으로 wrap-reverse의 효과를 살펴 보겠습니다

. 뷰가 래핑되고 행이 우리의 기대에 부합하는 역으로 배열 된 것을 볼 수 있습니다.

플렉스 흐름 속성

flex-flow 속성은 flex-direction과 flex-wrap의 조합입니다. 설정되지 않은 경우 기본값은 row nowarp입니다.
간단히 설명해 봅시다 :
WXML의 내용은 변경되지 않고 WXSS에서는 부모보기에 대해 flex-flow의 값만 설정됩니다. 효과를 살펴 보겠습니다.

.body {
    
    
  display: flex;
  flex-flow: row wrap;
}
.body > view {
    
    
  width: 100rpx;
  height: 100rpx;
  background-color: red;
  margin:20rpx;
  font-size: 50rpx;
}

페이지 효과는 예상대로, 방향은 가로이며 줄은 줄 바꿈됩니다.

justify-content 속성

Justify-content는 기본 축에서 컨테이너 내용의 정렬을 설정하는 것입니다.
일반적으로 사용되는 값은 다음과 같습니다.

• flex-start (기본값) : 왼쪽 맞춤
• flex-end : 오른쪽 정렬
• 중심 : 중심
• space-between : 양쪽 끝에서 정렬되며 항목 사이의 간격이 동일합니다.
• 주위 공간 : 각 항목의 양쪽 공간이 동일합니다. 따라서 항목 사이의 간격은 항목과 테두리 사이의 간격의 두 배입니다.
  코드를 사용하여 간단히 시연 해 보겠습니다.
  flex-start :

<view class="body">
  你好啊
</view>

.body {
    
    
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 100rpx;
  background-color: greenyellow;
}

플렉스 엔드 :

중심 :

공백 :

<view class="body">
  <text>你好啊</text>
  <text>我爱你</text>
</view>

.body {
    
    
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100rpx;
  background-color: greenyellow;
}

공간 주변 :

이론적 기대 범위 내에서 모두 가능합니다.

align-items 속성

align-items는 컨테이너의 내용이 수직 교차 축에 정렬되는 방식을 설정하는 것입니다.
일반적으로 사용되는 값은 다음과 같습니다.

• flex-start : 교차 축의 시작점 정렬
• flex-end : 교차 축의 끝 정렬
• 중심 : 교차 축의 중간 점 정렬
• 기준선 : 프로젝트 텍스트 첫 줄의 기준선 정렬
• 늘이기 (기본값) : 항목이 높이로 설정되지 않았거나 자동으로 설정되면 전체 컨테이너의 높이를 차지합니다
  . 처음 세 값은 주로 여기에서 사용됩니다.
  코드 및 데모 효과 :
  flex-start :

<view class="body">
  我爱你
</view>

.body {
    
    
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 100rpx;
  background-color: greenyellow;
}

플렉스 엔드 :

센터:

align-content 속성

align-content는 여러 축의 정렬을 설정하는 것으로 축이 하나만있는 경우 전체 속성이 작동하지 않습니다.
일반적으로 사용되는 값은 다음과 같습니다.

• flex-start : 교차 축의 시작점에 정렬합니다.

• flex-end : 교차 축의 끝과 정렬합니다.

• center : 교차 축의 중간 점에 정렬합니다.

• 간격 사이 : 교차 축의 양쪽 끝에 정렬되며 축 사이의 간격이 균등하게 분산됩니다.

• 공간 주변 : 각 축의 양쪽 간격이 동일합니다. 따라서 축 사이의 간격은 축과 프레임 사이의 간격의 두 배입니다.

• 늘이기 (기본값) : 축이 전체 교차 축을 차지합니다.

코드 및 데모 효과 :
늘이기 (기본값) :

<view class="body">
  <view>1</view>
  <view>2</view>
  <view>3</view>
  <view>4</view>
  <view>5</view>
  <view>6</view>
  <view>7</view>
  <view>8</view>
</view>

.body {
    
    
  display: flex;
  flex-flow: row wrap;
  height: 800rpx;
  align-content: stretch;
  background-color: greenyellow;
}
.body > view {
    
    
  width: 100rpx;
  height: 120rpx;
  font-size: 50rpx;
  background-color: red;
  margin: 20rpx;
}

플렉스 시작 :

flex-end :

center :

space-between :

space-around :

flex는 매우 간단하고 사용하기 쉬운 레이아웃 방법입니다. 여러 속성을 효과적으로 결합하고 사용하여 일일 페이지 레이아웃을 완성 할 수 있습니다.
WeChat 애플릿에 대한 질문이있는 경우 QQ : 505417246에 문의하십시오.
아래 WeChat 공식 계정을 팔로우하면 WeChat 애플릿, Vue, TypeScript, 프런트 엔드, 유니 앱, 풀 스택, Nodejs 및 기타 실용적인 학습을받을 수 있습니다. 기재