📚 Flex examples

user-guide/flexible-layouts/index.njk

@@ -107,11 +107,19 @@ title: 08· Flexible Layouts
 
 <h4>How to create a list</h4>
 <p>Extremely useful for ordering list items. Remember to set <strong>fit height</strong> to the container so it can adapt to the number of items.</p>
-<p><img src="/img/flexlayout-list.gif" alt="Flex Layout" /></p>
+<figure>
+  <video title="Creating a list with Flex Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-list.png" height="auto">
+    <source src="/img/flexible-layouts/layouts-flex-list.mp4" type="video/mp4">
+  </video>
+</figure>
 
 <h4>Wrapping elements</h4>
 <p>Use the <strong>wrap</strong> property along with <strong>row</strong> direction to get the elements positioned in multiple lines.</p>
-<p><img src="/img/flexlayout-wrap.gif" alt="Flex Layout" /></p>
+<figure>
+  <video title="Wrapping elements with Flex Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-wrap.png" height="auto">
+    <source src="/img/flexible-layouts/layouts-flex-wrap.mp4" type="video/mp4">
+  </video>
+</figure>
 
 
 <h2 id="layouts-grid">Grid Layout</h2>