Quando estamos desenvolvendo miniaplicativos WeChat, basicamente precisamos fazer o layout da página. Existem muitos métodos de layout. O layout flexível pode basicamente resolver todas as nossas necessidades e é simples e fácil de aprender.
Flex é a abreviatura de Flexible Box, que significa "layout flexível", que é usado para fornecer o máximo de flexibilidade para modelos de caixa.
O núcleo do layout flexível está no contêiner. Existem dois eixos por padrão, um é o eixo principal horizontal e o outro é o eixo transversal vertical, suportando todo o contêiner.
Qualquer contêiner pode ser designado como layout flexível.
.body {
display: flex;
}
Desta forma, definimos o layout do tipo flexível do contêiner.
Os atributos importantes do layout flexível são:
- direção flexível
- envoltório flexível
- flex-flow
- justify-content
- itens de alinhamento
- align-content
propriedade flex-direction
A direção flexível determina a direção do eixo principal.
Existem quatro valores selecionáveis:
- linha (padrão): O eixo principal é horizontal e o ponto de partida está na extremidade esquerda.
- linha reversa: O eixo principal está na direção horizontal e o ponto de partida está na extremidade direita.
- coluna: O eixo principal está na direção vertical e o ponto inicial está na borda superior.
- coluna reversa: O eixo principal está na direção vertical e o ponto inicial está na borda inferior.
Escrevemos um caso de uso simples:
<view class="body">
<view></view>
<view></view>
</view>
.body > view {
background-color: red;
width: 100rpx;
height: 100rpx;
margin: 20rpx;
}
Nós simplesmente escrevemos duas visualizações e definimos a largura, a altura e a cor de fundo para nos facilitar ver o efeito. Não fizemos nenhuma operação de layout na visualização pai, então seu efeito padrão é o seguinte:
porque a visualização é um elemento de bloco, portanto, sem surpresa, as duas visualizações estão em uma linha separada, dispostas uma acima da outra.
Em seguida, adicionamos o seguinte código à visualização pai em WXSS:
.body {
display: flex;
flex-direction: row;
}
Agora, vamos examinar o efeito novamente: as
duas visualizações estão na mesma linha e organizadas à esquerda e à direita. Porque definimos a direção flexível: linha, linha significa layout horizontal, então o efeito real está de acordo com nossos resultados teóricos.
atributos flex-wrap
flex-wrap é a situação em que uma linha no contêiner não está alinhada e precisa ser quebrada. Os
valores selecionáveis são:
- nowrap
- embrulho
- Quando wrap-reverse
não está definido, por padrão, o valor de flex-warp é nowarp.
Vamos demonstrar com código:
<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;
}
Este é o efeito sem nenhuma configuração:
Pode-se ver que essas visualizações foram deformadas, e a largura não é 100rpx, porque por padrão, o valor de flex-warp é nowarp, então é muito obediente e só pode ser comprimido sem empacotar.
Em seguida, definimos o valor de flex-warp para warp e olhamos o efeito:
pode-se ver que quando a largura da posição restante em uma linha é menor que 100rpx, ele executa uma quebra de linha, que é o efeito de flex-warp: warp.
A seguir, vamos dar uma olhada no efeito de wrap-reverse:
podemos ver que a visualização foi quebrada e as linhas estão organizadas ao contrário, o que está de acordo com nossas expectativas.
propriedades flex-flow
O atributo flex-flow é uma combinação de flex-direction e flex-wrap. Se não for definido, o valor padrão é row nowarp.
Vamos demonstrar brevemente:
O conteúdo de WXML permanece inalterado. Em WXSS, apenas o valor de flex-flow é definido para a visualização pai. Vamos ver o efeito.
.body {
display: flex;
flex-flow: row wrap;
}
.body > view {
width: 100rpx;
height: 100rpx;
background-color: red;
margin:20rpx;
font-size: 50rpx;
}
O efeito da página é o esperado, a orientação é paisagem e a linha é quebrada.
atributo justify-content
Justify-content é definir o alinhamento do conteúdo do contêiner no eixo principal.
Seus valores comumente usados são:
- flex-start (padrão): justificado à esquerda
- flex-end: alinhar à direita
- centro: centrado
- espaço entre: justificado em ambas as extremidades, o espaço entre os itens é igual.
- Espaço ao redor: O espaço em ambos os lados de cada item é igual. Portanto, o intervalo entre os itens é duas vezes maior do que o intervalo entre os itens e a borda.
Vamos demonstrar brevemente com o código:
flex-start:
<view class="body">
你好啊
</view>
.body {
display: flex;
justify-content: flex-start;
width: 100%;
height: 100rpx;
background-color: greenyellow;
}
extremidade flexível:
centro:
espaço entre:
<view class="body">
<text>你好啊</text>
<text>我爱你</text>
</view>
.body {
display: flex;
justify-content: space-between;
width: 100%;
height: 100rpx;
background-color: greenyellow;
}
espaço ao redor:
Tudo dentro de nossas expectativas teóricas.
atributo de itens de alinhamento
align-items é para definir como o conteúdo do contêiner é alinhado no eixo transversal vertical.
Seus valores comumente usados são:
- flex-start: alinha o ponto inicial do eixo cruzado
- extremidade flexível: alinhe a extremidade do eixo transversal
- centro: alinhe o ponto médio do eixo cruzado
- linha de base: o alinhamento da linha de base da primeira linha do texto do projeto
- esticar (valor padrão): Se o item não estiver definido como altura ou definido como automático, ele ocupará a altura de todo o recipiente
. Os três primeiros valores são usados principalmente aqui.
Código e efeito de demonstração:
flex-start:
<view class="body">
我爱你
</view>
.body {
display: flex;
align-items: flex-start;
width: 100%;
height: 100rpx;
background-color: greenyellow;
}
flex-end ：
Centro:
atributo align-content
align-content é para definir o alinhamento de vários eixos. Se houver apenas um eixo, a propriedade inteira não funcionará.
Seus valores comumente usados são:
-
flex-start: alinha com o ponto inicial do eixo transversal.
-
extremidade flexível: alinhe com a extremidade do eixo transversal.
-
centro: Alinha com o ponto médio do eixo cruzado.
-
Espaço entre: alinhe com ambas as extremidades do eixo cruzado e o espaço entre os eixos é distribuído uniformemente.
-
Espaço ao redor: os intervalos em ambos os lados de cada eixo são iguais. Portanto, o intervalo entre os eixos é duas vezes maior que o intervalo entre os eixos e o quadro.
-
esticar (padrão): O eixo ocupa todo o eixo transversal.
Código e efeito de demonstração:
esticar (padrão):
<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-start ：
flex-end:
center:
space-between:
space-around:
flex é um método de layout muito simples e fácil de usar.Você pode combinar e usar efetivamente várias de suas propriedades para completar o layout diário da página.
Se você tiver alguma dúvida sobre o miniaplicativo WeChat, entre em contato com QQ: 505417246.
Siga a conta oficial do WeChat abaixo e poderá receber miniaplicativo WeChat, Vue, TypeScript, front-end, uni-app, full stack, Nodejs e outros aprendizados práticos materiais
