Polymère - Disposition Iron Flex

L'élément <iron-flex-layout> est utile pour fournir une disposition de boîte flexible CSS et est également appelé flexbox.

La flexbox peut être utilisée de deux manières différentes -

  • Layout classes - C'est une feuille de style fournissant certaines règles de flexbox basée sur les classes où les propriétés de mise en page sont directement définies dans le balisage.

  • Custom CSS mixins - C'est une feuille de style contenant des mixins CSS personnalisés, que nous pouvons appliquer à l'intérieur d'une règle CSS à l'aide de la fonction @apply.

Exemple

Pour utiliser l'élément iron-flex-layout, accédez au dossier de votre projet dans l'invite de commande et utilisez la commande suivante -

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

La commande ci-dessus installe l'élément iron-flex-layout dans le dossier bower_components. Ensuite, importez le fichier iron-flex-layout dans votre index.html à l'aide de la commande suivante -

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

L'exemple suivant montre l'utilisation de l'élément 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>

Production

Pour exécuter l'application, accédez au répertoire de votre projet et exécutez la commande suivante -

polymer serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.