Polímero - Diseño flexible de hierro

El elemento <iron-flex-layout> es útil para proporcionar un diseño de caja flexible CSS y también se denomina como flexbox.

El flexbox se puede utilizar de dos formas diferentes:

Layout classes - Es una hoja de estilo que proporciona ciertas reglas de caja flexible basada en clases donde las propiedades de diseño se definen directamente en el marcado.
Custom CSS mixins - Es una hoja de estilo que contiene mixins CSS personalizados, que podemos aplicar dentro de una regla CSS con la ayuda de la función @apply.

Ejemplo

Para usar el elemento iron-flex-layout, navegue a la carpeta de su proyecto en el símbolo del sistema y use el siguiente comando:

bower install PolymerElements/iron-flex-layout --save

El comando anterior instala el elemento iron-flex-layout en la carpeta bower_components. A continuación, importe el archivo iron-flex-layout en su index.html usando el siguiente comando:

<link rel = "import" href = "/bower_components/iron-flex-layout/iron-flex-layout.html">

El siguiente ejemplo demuestra el uso del elemento iron-flex-layout:

<!DOCTYPE html>
<html>
   <head>
      <title>iron-flex-layout</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import"
         href = "bower_components/iron-flex-layout/classes/iron-flex-layout.html">
    
      <style>
         body {
            font-weight: 300;
         }
         div {
            border: 2px solid DarkCyan ;
            background-color: white;
         }
         .layout {
            margin-bottom: 25px;
            background-color: DarkCyan ;
         }
         p {
            margin: 10px;
         }
      </style>
   </head>
   
   <body>
      <h2>Iron-Flex-Layout</h2>
      <div class = "horizontal layout">
         <div><p>Delta</p></div>
         <div><p>Epsilon (flex)</p></div>
         <div><p>Zeta</p></div>
      </div>
   </body>
</html>

Salida

Para ejecutar la aplicación, navegue hasta el directorio de su proyecto y ejecute el siguiente comando:

polymer serve

Ahora abra el navegador y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.

↰ Previous page