mirror of
https://github.com/penpot/penpot-docs.git
synced 2024-07-12 06:41:46 +00:00
💄 Flex layout section
This commit is contained in:
parent
1a3e8d601f
commit
2a02a30d3e
BIN
img/flexlayout-button.gif
Normal file
BIN
img/flexlayout-button.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 282 KiB |
BIN
img/flexlayout-list.gif
Normal file
BIN
img/flexlayout-list.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 410 KiB |
BIN
img/flexlayout-properties.png
Normal file
BIN
img/flexlayout-properties.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 38 KiB |
BIN
img/flexlayout-wrap.gif
Normal file
BIN
img/flexlayout-wrap.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.8 MiB |
|
@ -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>
|
||||
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user