Inicia sesión




Diseño flexible en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales en diseño flexible - flex layout en CSS3.
Background:flex, flex layout concept
El diseño de Flex se llama CSS Flexible Box Layout Module. Es una nueva solución de diseño de página propuesta por W3C. La primera versión fue lanzada en 2009. Hasta ahora, W3C ha lanzado 12 versiones, la última versión se lanzó en 2017/10/19 y ha sido compatible con todos los navegadores principales, así que por favor úselo con valentía ~

Demostración del principio de Flexbox

El diseño de Flex consta de dos partes: el contenedor flex container y el elemento flex item. El contenedor tiene dos ejes por defecto: el eje horizontal main axis y el eje transversal vertical cross axis. El iterm por defecto al eje principal. La propiedad Flex consta de dos partes: la propiedad del contenedor y la propiedad del proyecto. El contenedor se puede ajustar a: flex-direction, flex-wrap, flex-grow, justify-content, align-items, align-content 6 atributos, seis atributos se pueden ajustar también en el tema: order, flex-grow, flex-shrink, flex-basis, flex, align-self. Un ejemplo es el siguiente:

Propiedades del contenedor

Propiedad de dirección flexible

Función: determina la dirección del eje principal.
flex-direction: row | row-reverse | column | column-reverse;
  • fila: el valor predeterminado, el eje principal es horizontal, indicando de izquierda a derecha.
  • fila invertida: el eje principal es horizontal, indicando de derecha a izquierda.
  • Columna: el eje principal está en la dirección vertical, dispuesto de arriba a abajo.
  • columna inversa: el eje está en dirección vertical, dispuesto de abajo hacia arriba.
<style>
  main {
    width: 100%;
    padding: 52px 17px 52px 29px;
  }
  .container {
    display: flex;
    flex-direction: row;
  }
  .item {
    width: 20%; height: 29px;
    background: #b4a078;
    border-radius: 5px;
    margin: 12px;
    margin-left: 0;
  }
</style>

<main>
    <span class="radio-wrap" v-for="radio in radios">
      <input 
        type="radio"
        :id="radio.id"
        :value="radio.value"
        v-model="flexDirection">
      <label :for="radio.id" @click="handleSelected(radio.id)">
        {{ radio.value }}
      </label>
    </span>
    <div class="container" :style="{ flexDirection }">
      <span
        class="item"
        v-for="$ in elements"
        :style="{ opacity: 1 - $ / 10 }">
      </span>
    </div>
</main>

<script>
  export default {
    data() {
      return {
        elements: Array.from({ length: 5 }).map((v, i) => i + 1),
        radios: [
          { id: 'row', value: 'row' },
          { id: 'row-reverse', value: 'row-reverse' },
          { id: 'column', value: 'column' },
          { id: 'column-reverse', value: 'column-reverse' },
        ],
        flexDirection: 'row',
      }
    },
    methods: {
      handleSelected(dir) {
        this.flexDirection = dir;
      }
    }
  }
</script>
Ver resultado
Gracias: Las demostraciónes anteriores se pueden ver en el siguiente enlace...

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-03-11
  • Categorias: Diseño Web CSS3 WebSite Noticias Tutorial

Diseño flexible en CSS3
Diseño flexible en CSS3 Diseño flexible en CSS3...
Tutoriales en linea




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Mejoras en los graficos y tablas en Google App

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Google Apps Herramientas Ofimaticas Noticias Tutorial

Agujeros De Seguridad En Android, Facebook, Windows, Office, Internet Explorer, Adobe...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Noticias Adobe Tutorial Facebook Windows Herramientas Ofimaticas

Como diseñar trayectorias del movimiento en PowerPoint

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-05-16
  • Categorias: Herramientas Ofimaticas PowerPoint Microsoft Software Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-17
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial