This Obsidian plugin lets you create layouts with flexible columns (using the flexbox model) or tables. It is intended to be a complement to markdown tables. Some of the pain points it solves:
- Cells can have complex markdown like lists, paragraphs, and images.
- The layout does not need to be a grid.
- It is easy to manage layouts (and tables) with lots of data.
- It is simple to convert regular markdown into a flexdown layout (and revert it) becaues the tags flow between the data, i.e., just replace blank lines with column and row dividers, and add the start & end tags.
- It has many options for controlling the layout.
Create the layout with a flexdown code block, eg:
```flexdown
```
To make new columns, put a "|" on a new line. To make new rows, put a "---" on a new line.
Example 1
```flexdown
This is great! I can have a list:
- with
- some
- items
|
And a second column can have
paragraphs
**and**
many other items.
---
Cool, right? And it doesn't have to be a grid!
```
Output
Example 2
Images resize to fit their cells by default. This example shows several features:
- Hide the border with the border:none option.
- Set the flex (resizing) rule for all the items using the flex-all option. The items are set an initial width of 200 pixels, but are still allowed to grow to fill the space.
- The first 6 images are all in one "row" and are allowed to wrap to fill up the space.
- The last image is in its own row, the initial width is 200px, but it will grow to fill up the space.
```flexdown
%% flex-all: 200px
%% border: none
|
|
|
|
|
---
```
Output
Options start with "%%". The options are usually specified at the start of the block, but it's not necessary, and there are exceptions.
Flexdown will render a border by default, but you can hide it with this option.
Usage
%% border: none
Example
```flexdown
%% border: none
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
```
Output
Usage
%% flex: <column 1 flex value>, <column 2 flex value>, ...
Specify column width rules with the flex option. This option sets the inline CSS flex attribute on the columns. Enter values for as many (or few) columns as you like, separated by commas.
The default style is flex: 1
Example
```flexdown
%% flex: 1, 3, 7
A
|
123
|
This number is small
---
B
|
456
|
This number is bigger
```
Output
The flex values can be any of the variations of the CSS flex attribute, e.g.:
/* Specify only flex-grow */
flex: 1
/* Specify flex-grow and flex-basis, e.g. this column won't grow and will stay 100px wide: */
flex: 0 100pxUsage
%% flex-all: <flex value>
Set the flex style for all items. The %% flex option can also be used and takes precedence.
Usage
%% display: table
Render the layout as a table instead of flexbox. This is useful if you need a grid or need the cells to line up, because flexbox can be too flexible sometimes.
Usage
%% header
Place this at the start of any row that you want to emphasize, and it will be rendered with a background color and bold text.
Example
```flexdown
%% header
Food
|
Likes
---
Ice-cream
|
100%
---
Mushrooms
|
25%
```
Output
This plugin has not yet been submitted to the Obsidian plugin registry (soon!).
To manually install the plugin, download dist/flexdown.zip and unzip it in the .obsidian/plugins folder of your Obsidian vault. You'll have to turn off Obsidian settings > Community Plugins > Restricted mode in Obsidian settings (this is required to use any third-party plugins). Finally restart Obsidian (or View > Force Reload).
These are the styles used, which can be customized:
/* Change the border color with this variable */
--flexdown-border-color: #ccc;
.flexdown-row
.flexdown-column
/* Emphasize rows marked as headers */
.flexdown-header-row
/*
When a border is rendered, this class is added to
the parent of all the .flexdown-row elements, so you can
customize these classes.
*/
.flexdown-border
.flexdown-border .flexdown-row
.flexdown-border .flexdown-column
/* When "display: table" is used to render as <table></table>: */
table.flexdown
table.flexdown th
table.flexdown td > img
table.flexdown td > *