위챗 미니프로그램 가이드 : flexbox 레이아웃

유튜브 강좌 : youtu.be/6h_7w3shGGs

 

flex === flexbox (레이아웃)

위챗 미니프로그램은 flexbox 레이아웃을 이용하여 컴포넌트를 배치합니다. 

flexbox는 화면에 적합한 너비와 높이의 레이아웃을보다 쉽게 설정하여 사용할수 있습니다.

부모 요소를 Flex Container(플렉스 컨테이너)라고 부르고,
자식 요소들을 Flex Item(플렉스 아이템)이라고 부릅니다.

container가 flex의 영향을 받는 노란색 공간이고

설정된 속성에 따라 각각의 item들이 어떤 형태로 배치되는 것입니다.

Flex의 속성은 아래 2가지로 구분해서 알아보겠습니다.

- 컨테이너에 적용하는 속성

- 아이템에 적용하는 속성

 

경계 속성 : margin, padding, border

위 이미지와 같이 빨간색 부분의 여백이 border이며

아래 이미지와 같이 가장 바깥쪽에 있는 여백이 margin이며

아래 이미지와 같이 border와 아이템(item)사이의 여백이 padding입니다.

박스모델의 경계를 설정해줄때 몇가지 방법이 있습니다.

 

상우하좌 모두 30px

margin: 30px; ( 순서는 상우하좌 : 시계방향 )

 

상우하좌 각각

margin: 10px 20px 15px 5px; ( 순서는 상우하좌 : 시계방향 )

 

상하가 10px로 같고, 좌우가 5px로 같을 때

margin: 10px 5px;

 

좌우는 같은데, 상하가 다를 때

margin: 10px 5px 25px; ( 10px는 top의 값, 마지막에 나오는 25px는 bottom이고 가운데 5px가 left = right 마진입니다. )

 

정리하면

margin: [top] [right] [bottom] [left];

margin: [top] [left = right] [bottom];

margin: [top = bottom] [left = right];

margin: [top = bottom = left = right];

 

아래와 같이 필요한것만 할수도 있습니다.

margin-top: 10px;

margin-right: 20px;

margin-bottom: 15px;

margin-left: 5px;

 

padding, border의 경우도 마찬가지입니다.

 

 

컨테이너에 적용하는 속성

- display: 속성 => flex, block

/* flex.wxss */

.bg-gray {
  background-color: gray;
  color: black;
}
.bg-red {
  background-color: red;
  color: black;
}
.bg-green {
  background-color: green;
  color: yellow;
}.bg-blue {
  background-color: blue;
  color: white;
}
.bg-yellow {
  background-color: yellow;
  color : black;
}
.margin-sm {
  margin: 20rpx;
}
.padding-sm {
  padding: 20rpx;
}
.padding-align {
  padding-top: 100rpx;
  padding-bottom: 100rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
}
.boundary {
  margin: 30px;
  padding: 20px;
  border: 10px solid red;
}

/* display */
.flex {
  display: flex;
}
.block {
  display: block;
}

<!-- flex.wxml -->

<text>\n> 컨테이너 속성 : display</text>

<view class="flex bg-yellow">display : flex</view>
<view class="flex">
  <view class="bg-red margin-sm padding-sm">ABCDEFG</view>
  <view class="bg-green margin-sm padding-sm">가자 어디로 들로 산으로</view>
  <view class="bg-blue margin-sm padding-sm">123</view>
</view>

<view class="flex bg-yellow">display : block</view>
<view class="block">
  <view class="bg-red margin-sm padding-sm">ABCDEFG</view>
  <view class="bg-green margin-sm padding-sm">가자 어디로 들로 산으로</view>
  <view class="bg-blue margin-sm padding-sm">123</view>
</view>

컨테이너에 display: flex;를 적용하는게 시작이에요.
이 한 줄의 CSS만으로 아이템들은 기본적으로 아래 그림과 같이 배치됩니다.

 

- flex-direction: 속성 => row, row-reverse, column, column-reverse

아이템들이 배치되는 축의 방향을 결정하는 속성.

/* flex-direction */
.flex-direction-row {
  flex-direction: row;
}
.flex-direction-row-reverse {
  flex-direction: row-reverse;
}
.flex-direction-column {
  flex-direction: column;
}
.flex-direction-column-reverse {
  flex-direction: column-reverse;
}

<text>\n> 컨테이너 속성 : flex-direction</text>

<view class="flex bg-yellow">flex-direction : row (기본값)</view>
<view class="flex flex-direction-row">
  <view class="bg-red margin-sm padding-sm">0</view>
  <view class="bg-red margin-sm padding-sm">1</view>
  <view class="bg-red margin-sm padding-sm">2</view>
  <view class="bg-red margin-sm padding-sm">3</view>
</view>

<view class="flex bg-yellow">flex-direction : row-reverse</view>
<view class="flex flex-direction-row-reverse">
  <view class="bg-red margin-sm padding-sm">0</view>
  <view class="bg-red margin-sm padding-sm">1</view>
  <view class="bg-red margin-sm padding-sm">2</view>
  <view class="bg-red margin-sm padding-sm">3</view>
</view>

<view class="flex bg-yellow">flex-direction : column</view>
<view class="flex flex-direction-column">
  <view class="bg-green margin-sm padding-sm">0</view>
  <view class="bg-green margin-sm padding-sm">1</view>
  <view class="bg-green margin-sm padding-sm">2</view>
</view>

<view class="flex bg-yellow">flex-direction : column-reverse</view>
<view class="flex flex-direction-column-reverse">
  <view class="bg-green margin-sm padding-sm">0</view>
  <view class="bg-green margin-sm padding-sm">1</view>
  <view class="bg-green margin-sm padding-sm">2</view>
</view>

 

 

- flex-wrap: 속성 => nowrap, wrap, wrap-reverse

컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성.

/* flex-wrap */
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

<text>\n> 컨테이너 속성 : flex-wrap</text>

<view class="flex bg-yellow">flex-wrap : nowrap (기본값)</view>
<view class="flex flex-nowrap">
  <view class="bg-red margin-sm padding-sm">0</view>
  <view class="bg-red margin-sm padding-sm">1</view>
  <view class="bg-red margin-sm padding-sm">2</view>
  <view class="bg-red margin-sm padding-sm">3</view>
  <view class="bg-red margin-sm padding-sm">4</view>
  <view class="bg-red margin-sm padding-sm">5</view>
  <view class="bg-red margin-sm padding-sm">6</view>
  <view class="bg-red margin-sm padding-sm">7</view>
  <view class="bg-red margin-sm padding-sm">8</view>
  <view class="bg-red margin-sm padding-sm">9</view>
</view>

<view class="flex bg-yellow">flex-wrap : wrap</view>
<view class="flex flex-wrap">
  <view class="bg-green margin-sm padding-sm">0</view>
  <view class="bg-green margin-sm padding-sm">1</view>
  <view class="bg-green margin-sm padding-sm">2</view>
  <view class="bg-green margin-sm padding-sm">3</view>
  <view class="bg-green margin-sm padding-sm">4</view>
  <view class="bg-green margin-sm padding-sm">5</view>
  <view class="bg-green margin-sm padding-sm">6</view>
  <view class="bg-green margin-sm padding-sm">7</view>
  <view class="bg-green margin-sm padding-sm">8</view>
  <view class="bg-green margin-sm padding-sm">9</view>
</view>

<view class="flex bg-yellow">flex-wrap : wrap-reverse</view>
<view class="flex flex-wrap-reverse">
  <view class="bg-blue margin-sm padding-sm">0</view>
  <view class="bg-blue margin-sm padding-sm">1</view>
  <view class="bg-blue margin-sm padding-sm">2</view>
  <view class="bg-blue margin-sm padding-sm">3</view>
  <view class="bg-blue margin-sm padding-sm">4</view>
  <view class="bg-blue margin-sm padding-sm">5</view>
  <view class="bg-blue margin-sm padding-sm">6</view>
  <view class="bg-blue margin-sm padding-sm">7</view>
  <view class="bg-blue margin-sm padding-sm">8</view>
  <view class="bg-blue margin-sm padding-sm">9</view>
</view>

 

 

- flex-flow: 속성 속성

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성으로 flex-direction, flex-wrap의 순으로 한 칸 떼고 써주시면 됩니다.

/* flex-flow */
.flex-flow-row-wrap {
  flex-flow: row wrap;
  /* 아래의 두 줄을 줄여 쓴 것 */
  /* flex-direction: row; */
  /* flex-wrap: wrap; */
}

<text>\n> 컨테이너 속성 : flex-flow</text>

<view class="flex bg-yellow">flex-flow : row wrap</view>
<view class="flex flex-flow-row-wrap">
  <view class="bg-red margin-sm padding-sm">0</view>
  <view class="bg-red margin-sm padding-sm">1</view>
  <view class="bg-red margin-sm padding-sm">2</view>
  <view class="bg-red margin-sm padding-sm">3</view>
  <view class="bg-red margin-sm padding-sm">4</view>
  <view class="bg-red margin-sm padding-sm">5</view>
  <view class="bg-red margin-sm padding-sm">6</view>
  <view class="bg-red margin-sm padding-sm">7</view>
  <view class="bg-red margin-sm padding-sm">8</view>
  <view class="bg-red margin-sm padding-sm">9</view>
</view>

 

 

- justify-content: 속성 => flex-start, flex-end, center, space-between, space-around

수평(메인축) 방향으로 아이템을들 정렬하는 속성.

/* justify-content */
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}

<text>\n> 컨테이너 속성 : justify-content</text>

<view class="flex bg-yellow">justify-content : flex-start (기본값)</view>
<view class="flex justify-start">
  <view class="bg-red padding-sm margin-sm">아이템</view>
</view>

<view class="flex bg-yellow">justify-content : justify-end</view>
<view class="flex justify-end">
  <view class="bg-red padding-sm margin-sm">아이템</view>
</view>

<view class="flex bg-yellow">justify-content : justify-center</view>
<view class="flex justify-center">
  <view class="bg-red padding-sm margin-sm">아이템</view>
  <view class="bg-green padding-sm margin-sm">아이템</view>
</view>

<view class="flex bg-yellow">justify-content : justify-between</view>
<view class="flex justify-between">
  <view class="bg-red padding-sm margin-sm">아이템</view>
  <view class="bg-green padding-sm margin-sm">아이템</view>
  <view class="bg-blue padding-sm margin-sm">아이템</view>
</view>

<view class="flex bg-yellow">justify-content : justify-around</view>
<view class="flex justify-around">
  <view class="bg-red padding-sm margin-sm">아이템</view>
  <view class="bg-green padding-sm margin-sm">아이템</view>
  <view class="bg-blue padding-sm margin-sm">아이템</view>
</view>

space-between : 아이템들의 “사이(between)”에 균일한 간격을 만들어 줍니다.

space-around : 아이템들의 “둘레(around)”에 균일한 간격을 만들어 줍니다.

 

- align-items: 속성 => flex-start, flex-end, center

수직 방향으로 아이템을들 정렬하는 속성.

/* align-items */
.align-start {
  align-items: flex-start;
}
.align-end {
  align-items: flex-end;
}
.align-center {
  align-items: center;
}

<text>\n> 컨테이너 속성 : align-items</text>

<view class="flex bg-yellow">align-items : flex-start (기본값)</view>
<view class="flex align-start">
  <view class="bg-red padding-align margin-sm">아이템</view>
  <view class="bg-green padding-sm margin-sm">아이템</view>
</view>

<view class="flex bg-yellow">align-items : flex-end</view>
<view class="flex align-end">
  <view class="bg-red padding-align margin-sm">아이템</view>
  <view class="bg-green padding-sm margin-sm">아이템</view>
</view>

<view class="flex bg-yellow">align-items : center</view>
<view class="flex align-center">
  <view class="bg-red padding-align margin-sm">아이템</view>
  <view class="bg-green padding-sm margin-sm">아이템</view>
</view>

 

 

 

아이템에 적용하는 속성

- flex-basis: 속성 => auto, 100px, 10%

기본값 auto는 해당 아이템의 width값을 사용.

width, height 등에 사용하는 각종 단위의 수가 들어갈 수 있다.

/* flex-basis */
.basis-auto {
  flex-basis: auto;
}

.basis-100px {
  flex-basis: 100px;
}
.basis-150px {
  flex-basis: 150px;
}
.basis-200px {
  flex-basis: 200px;
}
.basis-250px {
  flex-basis: 250px;
}
.basis-300px {
  flex-basis: 300px;
}

.basis-10per {
  flex-basis: 10%;
}
.basis-20per {
  flex-basis: 20%;
}
.basis-30per {
  flex-basis: 30%;
}
.basis-40per {
  flex-basis: 40%;
}
.basis-50per {
  flex-basis: 50%;
}
.basis-60per {
  flex-basis: 60%;
}
.basis-70per {
  flex-basis: 70%;
}
.basis-80per {
  flex-basis: 80%;
}
.basis-90per {
  flex-basis: 90%;
}
.basis-100per {
  flex-basis: 100%;
}

<text>\n> 아이템 속성 : flex-basis</text>

<view class="flex bg-yellow">flex-basis : auto (기본값)</view>
<view class="flex flex-wrap padding-sm">
  <view class="basis-auto bg-red">ABCDE</view>
  <view class="basis-auto bg-green">가자 어디로</view>
  <view class="basis-auto bg-blue">12</view>
</view>

<view class="flex bg-yellow">flex-basis : px</view>
<view class="flex flex-wrap padding-sm">
  <view class="basis-100px bg-red">100px</view>
  <view class="basis-150px bg-green">150px</view>
  <view class="basis-200px bg-blue">200px</view>
  <view class="basis-250px bg-red">250px</view>
  <view class="basis-300px bg-green">300px</view>
</view>

<view class="flex bg-yellow">flex-basis : %</view>
<view class="flex flex-wrap padding-sm">
  <view class="basis-10per bg-red">10%</view>
  <view class="basis-20per bg-green">20%</view>
  <view class="basis-30per bg-blue">30%</view>
  <view class="basis-40per bg-red">40%</view>
  <view class="basis-50per bg-green">50%</view>
  <view class="basis-60per bg-blue">60%</view>
  <view class="basis-70per bg-red">70%</view>
  <view class="basis-80per bg-green">80%</view>
  <view class="basis-90per bg-blue">90%</view>
  <view class="basis-100per bg-red">100%</view>
</view>

 

 

- flex: 비율

/* flex */
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}

<text>\n> 아이템 속성 : flex</text>

<view class="flex bg-yellow">flex : 비율</view>
<view class="flex flex-wrap padding-sm">
  <view class="flex-1 bg-red">1</view>
  <view class="flex-1 bg-green">1</view>
</view>

<view class="flex flex-wrap padding-sm">
  <view class="flex-1 bg-red">1</view>
  <view class="flex-2 bg-green">2</view>
</view>

<view class="flex flex-wrap padding-sm">
  <view class="flex-1 bg-red">1</view>
  <view class="flex-2 bg-green">2</view>
  <view class="flex-3 bg-blue">3</view>
</view>

 

- align-self: auto(기본값), flex-start, flex-end, center, stretch

아이템의 수직축 정렬 속성.

기본적으로 컨테이너 align-items설정의 값을 상속받지만 아이템 속성 align-self이 있으면 align-self가 우선권이 있습니다.

align-self  > align-items

/* align-self */
.padding-align-100px {
  height: 100px;
  padding: 20rpx;
}
.align-self-auto {
  align-self: auto;
}
.align-self-start {
  align-self: flex-start;
}
.align-self-end {
  align-self: flex-end;
}
.align-self-center {
  align-self: center;
}
.align-self-stretch {
  align-self: stretch;
}

<text>\n> 아이템 속성 : align-self</text>

<view class="flex bg-yellow">align-self : </view>
<view class="flex bg-yellow">auto(기본값), start, center, end, stretch</view>
<view class="flex flex-wrap padding-align-100px">
  <view class="align-self-auto bg-red">auto</view>
  <view class="align-self-start bg-green">start</view>
  <view class="align-self-center bg-red">center</view>
  <view class="align-self-end bg-blue">end</view>
  <view class="align-self-stretch bg-green">stretch</view>
</view>

 

 

- order: 순서값

나열 순서를 결정하는 속성. 작은 숫자일수록 먼저 나열됩니다.

/* order */
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}

<text>\n> 아이템 속성 : order</text>

<view class="flex bg-yellow">order : 순서값</view>
<view class="flex flex-wrap padding-sm">
  <view class="order-3 bg-red">AAA</view>
  <view class="order-1 bg-green">BBB</view>
  <view class="order-2 bg-blue">CCC</view>
</view>

 

 

- z-index: index값

index값이 클수록 위로 올라옵니다.

기본값은 0이며 1만 설정해도 나머지 아이템들 보다 위로 올라옵니다.

/* z-index */
.scale-2 {
  transform: scale(2);
}
.z-index-0 {
  z-index: 0;
}
.z-index-1 {
  z-index: 1;
}

<text>\n> 아이템 속성 : z-index</text>

<view class="flex bg-yellow">z-index : index값</view>
<view class="flex flex-wrap padding-sm">
  <view class="zIndex-0 bg-red">AAA</view>
  <view class="zIndex-1 scale-2 bg-green">BBB</view>
  <view class="zIndex-0 bg-blue">CCC</view>
</view>