Sintaxis y casos de uso de Flex Layout

Sugerencia: después de escribir el artículo, la tabla de contenido se puede generar automáticamente. Cómo generarla puede consultar el documento de ayuda a la derecha

---

prefacio

En 2009, el W3C propuso una nueva solución: el diseño flexible, que puede implementar varios diseños de página de manera simple, completa y receptiva. Actualmente es compatible con todos los navegadores, lo que significa que ahora es seguro usar esta función. El diseño flexible se convertirá en la solución preferida para futuros diseños. Este artículo presenta la sintaxis de Flex Layout y los casos de uso de proyectos reales.

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. ¿Qué es el diseño flexible?

Flex es la abreviatura de Flexible Box, que significa "diseño elástico", que se utiliza para proporcionar la máxima flexibilidad al modelo de caja.

Cualquier contenedor se puede especificar como un diseño flexible.

.box{
    
    
  display: flex;
}

Los elementos en línea también se pueden diseñar con Flex.

.box{
    
    
  display: inline-flex;
}

Los navegadores basados ​​en Webkit deben tener el prefijo -webkit.

.box{
    
    
  display: -webkit-flex; /* Safari */
  display: flex;
}

2. Conceptos básicos

Los elementos que adoptan un diseño flexible se denominan contenedores flexibles o "contenedores" para abreviar. Todos sus elementos secundarios se convierten automáticamente en miembros del contenedor, denominado elemento flexible (elemento flexible), denominado "elemento".

El contenedor tiene dos ejes por defecto: el eje principal horizontal y el eje transversal vertical. La posición inicial del eje principal (la intersección con el borde) se denomina inicio principal y la posición final se denomina final principal; la posición inicial del eje transversal se denomina inicio transversal y la posición final se denomina final transversal.
Los elementos se organizan a lo largo del eje principal de forma predeterminada. El espacio del eje principal ocupado por un solo elemento se denomina tamaño principal, y el espacio del eje transversal ocupado por un solo elemento se denomina tamaño transversal.

Dos, las propiedades del contenedor.

Las siguientes 6 propiedades se establecen en el contenedor.

• dirección de flexión
• envoltura flexible
• flujo flexible
• justificar-contenido
• alinear elementos
• alinear-contenido

3.1 propiedad de dirección flexible

La propiedad de dirección flexible determina la dirección del eje principal (es decir, la dirección en la que se organizan los elementos).

.box {
    
    
  flex-direction: row | row-reverse | column | column-reverse;
}

Puede tener 4 valores.

 - row（默认值）：主轴为水平方向，起点在左端。
 - row-reverse：主轴为水平方向，起点在右端。
 - column：主轴为垂直方向，起点在上沿。
 - column-reverse：主轴为垂直方向，起点在下沿。

3.2 propiedad de envoltura flexible

De forma predeterminada, los elementos se organizan a lo largo de una línea (también conocida como "eje"). El atributo flex-wrap define cómo ajustar si una línea de eje no encaja.

.box{
    
    
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Puede tomar tres valores.

(1) nowrap (predeterminado): No envolver.

(2) wrap: Newline, la primera línea está en la parte superior.

(3) wrap-reverse: Newline, la primera línea está debajo.

3.3 flujo flexible

El atributo de flujo flexible es una abreviatura para el atributo de dirección flexible y el atributo de envoltura flexible, y el valor predeterminado es fila ahora.

.box {
    
    
  flex-flow: <flex-direction> <flex-wrap>;
}

3.4 atributo de contenido justificado

La propiedad de justificar el contenido define cómo se alinean los elementos en el eje principal.

.box {
    
    
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

Puede tomar 5 valores, y la alineación específica depende de la dirección del eje. Lo siguiente asume que el eje principal es de izquierda a derecha.

 - flex-start（默认值）：左对齐
 - flex-end：右对齐
 - center： 居中
 - space-between：两端对齐，项目之间的间隔都相等。
 - space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3.5 atributo de elementos de alineación

El atributo align-items define cómo se alinean los elementos en el eje transversal.

.box {
    
    
  align-items: flex-start | flex-end | center | baseline | stretch;
}

Puede tomar 5 valores. La alineación específica está relacionada con la dirección del eje transversal, y lo siguiente asume que el eje transversal es de arriba hacia abajo.

 - flex-start：交叉轴的起点对齐。
 - flex-end：交叉轴的终点对齐。
 - center：交叉轴的中点对齐。
 - baseline: 项目的第一行文字的基线对齐。
 - stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

3.6 atributo de contenido de alineación

El atributo align-content define la alineación de varios ejes. Esta propiedad no tiene efecto si el elemento tiene un solo eje.

.box {
    
    
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Este atributo puede tomar 6 valores.

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

4. Propiedades del proyecto

Las siguientes 6 propiedades se establecen en los elementos.

 - order
 - flex-grow
 - flex-shrink
 - flex-basis
 - flex
 - align-self

4.1 atributo de orden

El atributo order define el orden de clasificación de los elementos. Cuanto menor sea el valor, mayor será la clasificación y el valor predeterminado es 0.

.item {
    
    
  order: <integer>;
}

4.2 propiedad de crecimiento flexible

El atributo flex-grow define la relación de ampliación del elemento y el valor predeterminado es 0, es decir, si queda espacio, no se ampliará.

.item {
    
    
  flex-grow: <number>; /* default 0 */
}

4.3 propiedad de contracción por flexión

La propiedad flex-shrink define la relación de reducción del elemento y el valor predeterminado es 1, es decir, si no hay suficiente espacio, el elemento se reducirá.

.item {
    
    
  flex-shrink: <number>; /* default 1 */
}

Si la propiedad de contracción por flexión de todos los elementos es 1, cuando el espacio sea insuficiente, se reducirán proporcionalmente. Si la propiedad de contracción flexible de un elemento es 0 y otros elementos son 1, el primero no se reducirá cuando no haya suficiente espacio.
Los valores negativos no tienen efecto sobre este atributo.

4.4 propiedad de base flexible

La propiedad flex-basis define cuánto espacio ocupa un elemento en el eje principal (tamaño principal) antes de asignar el exceso de espacio. En función de esta propiedad, el navegador calcula si hay espacio adicional en el eje principal. Su valor predeterminado es automático, que es el tamaño original del elemento.

.item {
    
    
  flex-basis: <length> | auto; /* default auto */
}

Se puede establecer en el mismo valor que las propiedades de ancho o alto (como 350 px), luego el elemento ocupará un espacio fijo.

4.5 propiedades de flexión

La propiedad flex es una abreviatura de flex-grow, flex-shrink y flex-basis, y el valor predeterminado es 0 1 auto. Los dos últimos atributos son opcionales.

.item {
    
    
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Este atributo tiene dos valores abreviados: automático (1 1 automático) y ninguno (0 0 automático).

Se recomienda usar este atributo primero en lugar de escribir tres atributos separados por separado, porque el navegador calculará el valor relevante.

4.6 atributo de autoalineación

El atributo align-self permite que un solo elemento tenga una alineación diferente a la de otros elementos y puede anular el atributo align-items. El valor predeterminado es automático, lo que significa heredar el atributo align-items del elemento principal. Si no hay ningún elemento principal, es equivalente a estirar.

.item {
    
    
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Este atributo puede tomar 6 valores, excepto auto, los demás son exactamente iguales al atributo align-items.

Cinco, ejemplos

Este es el código de diseño de la página de inicio de sesión del subprograma en el proyecto real. El
código del módulo de la parte login.vue

//login.vue
<template>
  <view
    v-if="page_show"
    class="container"
  >
    <view class="flex_center flex_col">
      <image
        class="logo"
        src="/static/images/login_logo.png"
        mode="aspectFit"
      ></image>
      <view class="name">智慧居住系统</view>
    </view>
    <view class="loginFrom">
      <view class="label"><text>手机号码</text></view>
      <view class="input">
        <u-input
          v-model="login.phone"
          maxlength="11"
          type="number"
          :custom-style="inputStyle"
          placeholder-style="font-size:32rpx;line-height:40rpx;color:#CED4E0"
          placeholder="请输入手机号码"
          height="88"
        />
      </view>
      <view class="gap"></view>
      <view class="label"><text>验证码</text></view>
      <view class="input flex_between">
        <u-input
          v-model="login.code"
          maxlength="6"
          type="number"
          :custom-style="inputStyle"
          placeholder-style="font-size:32rpx;line-height:40rpx;color:#CED4E0"
          placeholder="请输入验证码"
          height="88"
        />
        <view class="code">
          <text @tap="getCode">{
    
    {
    
     tips }}</text>
        </view>
      </view>
      <!-- 微信绿色按钮,使用uni-app原生样式 -->

      <view class="loginBtn">
        <u-button
          type="primary"
          @click="login_"
        >登 录</u-button>
      </view>
    </view>
    <view class="footer flex_center">
      <view @click="wx_login">
        <view class="flex_center">
          <view class="wx_box">
            <u-icon
              name="weixin-fill"
              color="#4cd964"
              size="64rpx"
            ></u-icon>
          </view>
        </view>
        <text>微信一键登录</text>
      </view>
    </view>
    <view
      class="show-env-tab"
      v-if="Config.USER_CONFIG.env !== 'release'"
    >
      <view class="show-env-name">
        {
    
    {
    
    showEnvName}}
      </view>
      <u-select
        v-model="showEnvTab"
        :list="envList"
        mode="single-column"
        @confirm="confirmEnv"
      ></u-select>
      <u-button
        @click="showEnvTab = true"
        class="show-env-button"
      >选择环境</u-button>
    </view>
    <u-verification-code
      :seconds="seconds"
      @end="end"
      @start="start"
      ref="uCode"
      @change="codeChange"
    ></u-verification-code>
  </view>
</template>

<style lang="scss">
.container {
    
    
  margin: 128rpx 64rpx 0;
  .logo {
    
    
    margin-top: 48rpx;
    width: 120rpx;
    height: 120rpx;
  }
  .name {
    
    
    margin-top: 32rpx;
    font-size: 48rpx;
    color: #262729;
    line-height: 48rpx;
  }
  .loginFrom {
    
    
    margin-top: 72rpx;
    font-size: 28rpx;
    line-height: 36rpx;
    text-align: left;
    color: #5e6166;
    .label {
    
    
      padding: 8rpx 16rpx;
    }
    .input {
    
    
      padding: 0 16rpx;
      box-shadow: 0px 1px 0px 0px #dcdfe6;
      .code {
    
    
        width: 180rpx;
        color: #3378ff;
        text-align: right;
        &:active {
    
    
          color: #3378ff80;
        }
      }
    }
    .gap {
    
    
      height: 40rpx;
    }
    .loginBtn {
    
    
      margin-top: 80rpx;
      button {
    
    
        height: 88rpx;
        font-size: 32rpx;
        line-height: 40rpx;
        background: #3378ff;
        border-radius: 44rpx;
        box-shadow: 0px 16px 32px 0px rgba(51, 120, 255, 0.3);
      }
    }
  }
  .show-env-tab {
    
    
    width: 100%;
    text-align: center;
    margin-top: 10rpx;
    .show-env-name {
    
    
      width: 100%;
      height: 24rpx;
      line-height: 24rpx;
      font-size: 24rpx;
      font-weight: bold;
    }
    .show-env-button {
    
    
      margin-top: 10rpx;
    }
  }
}
.footer {
    
    
  position: absolute;
  width: 100%;
  // background-color: pink;
  left: 0;
  bottom: 48rpx;
  .wx_box {
    
    
    border: 3rpx solid $uni-border-color;
    border-radius: 100%;
    padding: 20rpx;
    margin-bottom: 24rpx;
    &:active {
    
    
      background-color: #eeeeee;
    }
  }
  text {
    
    
    font-size: 24rpx;
    line-height: 32rpx;
    color: #969aa3;
    &:active {
    
    
      color: #969aa380;
    }
  }
}
</style>

El código de la sección util.css

.flex_center {
    
    
    display: flex;  //父盒子要写这句代码
    justify-content: center;  //定义子元素在主轴上的对齐方式，居中
    align-items: center;  //定义子元素在交叉轴上如何对齐
}
.flex_col {
    
    
    flex-direction: column;
}

fin

Este es el final del intercambio. La parte de gramática del diseño flexible se refiere al tutorial para principiantes . El caso de uso es la página de inicio de sesión del subprograma utilizado en el proyecto real. Es relativamente simple, por lo que se usa como ejemplo.