[CSS] Diseño flexible y contenedor de clase auxiliar Quasar

Diseño flexible y clase auxiliar Quasar Flex CSS

Las clases auxiliares de Quasar Flex CSS se refieren al marco de Quasar que ha definido algunas clases de CSS para ayudarnos a lograr efectos CSS. Podemos usar estas clases directamente en divs sin escribir estilos CSS. Si no comprende el marco de Quasar, no es necesario que preste atención al código relevante.

Propiedades que actúan sobre contenedores Flex

Propiedades que actúan sobre el contenedor flexible para ayudar al contenedor flexible a administrar elementos secundarios dentro del contenedor.

1. `flex-direction`Dirección de alineación del husillo

La dirección se divide en dirección horizontal y dirección vertical. En la dirección horizontal, puede establecer el extremo izquierdo como punto de partida o el extremo derecho como punto de partida. En la dirección vertical, puede establecer el extremo superior como punto de partida. o el extremo inferior como punto de partida.

1.1 CSS originales

Los valores de los atributos son:

rowEl punto de inicio horizontal está en el extremo izquierdo. Valor predeterminado
row-reverseEl punto de partida horizontal está en el extremo derecho.
columnEl punto de partida vertical está en la parte superior.
column-reverseEl punto de partida vertical está debajo

Insertar descripción de la imagen aquí

<template>
  <p>原始CSS样式 row</p>
  <div class="root flex-test">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 row-reverse</p>
  <div class="root flex-test1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</template>

<style>
.root {
  border: solid 1px #faccdd;
  margin: 10px;
}

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

.flex-test1 {
  display: flex;
  flex-direction: row-reverse;
}

.item {
  background-color: #adffcc;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

.flex-test {
  display: flex;
  flex-direction: column;
}

.flex-test1 {
  display: flex;
  flex-direction: column-reverse;
}

1.2 Quasar Flex CSS

fila
fila en línea
columna
columna en línea
fila inversa
columna inversa

Nota:
La clase auxiliar CSS de Quasar Flex anterior flex-directioncontiene además de propiedades flex-wrap, esta propiedad se analizará a continuación.

Insertar descripción de la imagen aquí

2.`flex-wrap`

Cómo envolver los subelementos en un contenedor flexible cuando no se pueden mostrar en una línea.

2.1 CSS originales

Los valores de los atributos son:

nowrapSin ajuste, el ancho o alto del elemento secundario se comprimirá si no se puede mostrar. valor por defecto.
wrapAjuste de línea, la segunda línea está debajo de la primera línea
wrap-reverseEnvolver, la segunda línea está encima de la primera línea.

<template>

  <p>原始CSS样式 nowrap</p>
  <div class="root flex-test">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 wrap</p>
  <div class="root flex-test1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
<p>原始CSS样式 wrap-reverse</p>
  <div class="root flex-test2">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</template>


<style>
.root {
  border: solid 1px #faccdd;
  margin: 10px;
}

.flex-test {
  display: flex;
  flex-wrap: nowrap;
}

.flex-test1 {
  display: flex;
  flex-wrap: wrap;
}
.flex-test2 {
  display: flex;
  flex-wrap: wrap-reverse;
}
.item {
  background-color: #adffcc;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

2.2 Quasar Flex CSS

envoltura
sin envoltura
envoltura inversa

3.`flex-flow`

es la abreviatura de flex-directionyflex-wrap

flex-flow: flex-direction flex-wrap;

flex-flow: row wrap;

4.`justify-content`

La alineación de elementos secundarios en el eje principal. Si hay un salto de línea, este efecto también se aplicará a la segunda línea. La alineación se calcula de forma independiente para la primera y segunda fila.

4.1 CSS sin formato

Los valores de los atributos son:

flex-startAlineado a la izquierda, predeterminado.
flex-endAlinear a la derecha
centeralineación central
space-betweenAlinee ambos extremos con el mismo espacio entre los elementos.
space-aroundEl espacio entre elementos es igual en ambos lados y el espacio entre elementos es dos veces mayor que el espacio entre los elementos y el borde del contenedor.
space-evenlypuntuación media entre ítems

<template>
  <p>原始CSS样式 flex-start</p>
  <div class="root flex-test">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 flex-end</p>
  <div class="root flex-test1">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 center</p>
  <div class="root flex-test2">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 space-between</p>
  <div class="root flex-test3">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 space-around</p>
  <div class="root flex-test4">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <p>原始CSS样式 space-evenly</p>
  <div class="root flex-test5">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</template>


<style>
.root {
  border: solid 1px #faccdd;
  margin: 10px;
}

.flex-test {
  display: flex;
  justify-content: flex-start;
}

.flex-test1 {
  display: flex;
  justify-content: flex-end;
}

.flex-test2 {
  display: flex;
   justify-content: center;
}
.flex-test3 {
  display: flex;
   justify-content: space-between;
}
.flex-test4 {
  display: flex;
   justify-content: space-around;
}
.flex-test5 {
  display: flex;
   justify-content: space-evenly;
}
.item {
  background-color: #adffcc;
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

Insertar descripción de la imagen aquí

Después de agregar estilos flex-testa todos , podemos ver el efecto cuando hay varias líneas.flex-test5flex-wrap:wrap;

Insertar descripción de la imagen aquí

4.2 CSS Quasar Flex

justificar-iniciar
justificar-final
justificar-centro
justificar entre
justificar
justificar uniformemente

5.`align-items`

¿Cómo se deben alinear los elementos secundarios a lo largo del eje transversal?

5.1 CSS sin formato

Los valores de los atributos son:

flex-startAlinear el punto de partida
flex-endalineación del punto final
centeralineación del punto medio
baselineAlineación de línea base basada en la primera línea de texto
stretchSolo tiene efecto cuando la altura del elemento secundario no está establecida o es automática. Cubre toda la altura del contenedor. El valor predeterminado es

<template>
  <p>原始CSS样式 flex-start</p>
  <div class="root flex-test">
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
  </div>
  <p>原始CSS样式 flex-end</p>
  <div class="root flex-test1">
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
  </div>
<p>原始CSS样式 center</p>
  <div class="root flex-test2">
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
  </div>
  <p>原始CSS样式 baseline</p>
  <div class="root flex-test3">
    <div class="item1">1</div>
    <div class="item1">2</div>
    <div class="item1">3</div>
    <div class="item1">4</div>
    <div class="item1">5</div>
  </div>
  <p>原始CSS样式 stretch</p>
  <div class="root flex-test4">
    <div class="item2">1</div>
    <div class="item2">2</div>
    <div class="item2">3</div>
    <div class="item2">4</div>
    <div class="item2">5</div>
  </div>
</template>


<style>
.root {
  height: 80px;
  border: solid 1px #faccdd;
  margin: 5px;
}

.flex-test {
  display: flex;
  align-items: flex-start;
}

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

.flex-test2 {
  display: flex;
   align-items: center;
}

.flex-test3 {
  display: flex;
  align-items: baseline;
}

.flex-test4 {
  display: flex;
 align-items: stretch;
}

.flex-test5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.item1 {
  background-color: #adffcc;
  width: 50px;
  height: 50px;
  margin: 5px;
}
.item2 {
  background-color: #adffcc;
  width: 50px;
  margin: 5px;
}
</style>

Insertar descripción de la imagen aquí

5.2 CSS Quasar Flex

inicio de artículos
fin de artículos
centro de artículos
estiramiento de artículos
línea de base de artículos

6.`align-content`

La alineación de múltiples ejes, para decirlo sin rodeos, es la alineación de los ejes en el eje transversal.

6.1 CSS sin formato

Los valores de los atributos son:

flex-start
flex-end
center
space-between
space-around
stretchLa línea del eje predeterminada cubre todo el eje transversal.

6.2 CSS Quasar Flex

content-start
content-end
content-center
content-stretch
content-between
content-around