mirror of
https://github.com/penpot/penpot-docs.git
synced 2024-08-03 09:48:54 +00:00
📚 Flex examples
This commit is contained in:
parent
fde65d276d
commit
f9c8b40bb6
BIN
img/flexible-layouts/layouts-flex-list.mp4
Normal file
BIN
img/flexible-layouts/layouts-flex-list.mp4
Normal file
Binary file not shown.
BIN
img/flexible-layouts/layouts-flex-list.png
Normal file
BIN
img/flexible-layouts/layouts-flex-list.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 585 KiB |
BIN
img/flexible-layouts/layouts-flex-wrap.mp4
Normal file
BIN
img/flexible-layouts/layouts-flex-wrap.mp4
Normal file
Binary file not shown.
BIN
img/flexible-layouts/layouts-flex-wrap.png
Normal file
BIN
img/flexible-layouts/layouts-flex-wrap.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 585 KiB |
@ -107,11 +107,19 @@ title: 08· Flexible Layouts
|
|||||||
|
|
||||||
<h4>How to create a list</h4>
|
<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>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>
|
<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>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>
|
<h2 id="layouts-grid">Grid Layout</h2>
|
||||||
|
Loading…
Reference in New Issue
Block a user