💄 Flex layout section

user-guide/flexible-layouts/index.njk

@@ -29,22 +29,37 @@ Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more ef
 
 
 <h3 id="flexlayout-properties">Flex Layout properties</h3>
-<p>You have properties for direction, align, justify, gap, padding, margin and sizing. Those are the same properties that you can use with <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties" target="_blank">CSS Flexbox</a>.</p>
-<p><img src="/img/flexlayout-.gif" alt="Flex Layout" /></p>
+<p>You have properties for direction, align, justify, gap, padding, margin and sizing. Those are the same properties that you can use with CSS Flexbox. You can <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties" target="_blank">read here detailed explanations about Flexbox properteries</a>.</p>
+<p><img src="/img/flexlayout-properties.png" alt="Flex Layout" /></p>
+<h4>Flex Layout properties:</h4>
 <ul>
-  <li><strong>Direction:</strong> Row, reverse row, column, reverse column</li>
+  <li><strong>Direction:</strong> Row, reverse row, column, reverse column.</li>
+  <li><strong>Wrap (Direction):</strong> Align content start / center / end / space-around / space-between.</li>
+  <li><strong>Align items:</strong> Start, center, end.</li>
+  <li><strong>Justify content:</strong> start, center, end, space-around, space-between.</li>
+  <li><strong>Gap:</strong> Row, column.</li>
+  <li><strong>Padding:</strong> Top, right, bottom, left.</li>
+  <li><strong>Sizing:</strong> Fix/fit width, Fix/fit height.</li>
 </ul>
 
 
-
-<h3 id="flexlayout-css">mm</h3>
-<p></p>
-<p><img src="/img/flexlayout-.gif" alt="Flex Layout" /></p>
+<h3 id="flexlayout-code">Get code and specifications</h3>
+<p>Designing with Flex Layout generates ready for production code. Select the flex board or its inner elements and then open the <a href="/user-guide/inspect" target="_blank">Inspect tab</a> to obtain its properties detailed info and raw code.</p>
+<p><img src="/img/flexlayout-code.png" alt="Flex Layout" /></p>
 
 
-<ul>
-  <li><strong>mmm:</strong> mmm</li>
-</ul>
+<h3 id="flexlayout-examples">Flex Layout basic examples</h3>
+<h4>How to create a button</h4>
+<p>A classic example that will help you create flexible buttons that grow depending on its content.</p>
+<p><img src="/img/flexlayout-button.gif" alt="Flex Layout" /></p>
+
+<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>
+
+<h4>How to create a grid</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>