Flex Layout

Penpot's unique Flex Layout allows you to create flexible designs that can adapt automatically. Resize, fit, and fill content and containers without the need to do it manually.

Flex Layout is based on CSS standards

Penpot's proposal tries to get as close as possible to the final output that we will see on the web. Design and development speak the same language in order to embrace web standards and improve communication between roles. Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more efficient way to lay out, align and distribute space among items in a container. As there are already many comprehensive explations about Flexbox we are not going to write another one. If you are interested we can recommend you to read the one at CSS Tricks.

Add Flex Layout

You can add Flex Layout to any layer, group, board or a selection including any of these. Once Flex Layout Flex is added the selected elements will be contained into a board with the Flex Layout properties. You have several ways to do this:

• From the Design panel at the right sidebar.
• From the option at the selection menu (right click button).
• Pressing Ctrl/⌘ + A.

Arrange and reorder objects to a Flex Layout

To add an object to a Flex Layout you can just drag it at the position of your desire. You can also create or paste elements like in any regular board.

To reorder elements you can drag them or use the UP/DOWN keystrokes.

Flex Layout properties

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 read here detailed explanations about Flexbox properties.

Flex Layout properties:

• Direction: Row, reverse row, column, reverse column.
• Wrap (Direction): Align content start / center / end / space-around / space-between.
• Align items: Start, center, end.
• Justify content: start, center, end, space-around, space-between.
• Gap: Row, column.
• Padding: Top, right, bottom, left.
• Sizing: Fix/fit width, Fix/fit height.

Get code and specifications

Designing with Flex Layout generates ready for production code. Select the flex board or its inner elements and then open the Inspect tab to obtain its properties detailed info and raw code.

Flex Layout basic examples

How to create a button

A classic example that will help you create flexible buttons that grow depending on its content.

How to create a list

Extremely useful for ordering list items. Remember to set fit height to the container so it can adapt to the number of items.

How to create a grid

Use the wrap property along with row direction to get the elements positioned in multiple lines.