Version:

Install ​

Maven ​

Single:

xml
<dependency>
    <groupId>de.mate_ds</groupId>
    <artifactId>mate-flex-layout-flow</artifactId>
</dependency>

Import ​

java
import com.vaadin.flow.component.html.Div;
import de.mate_ds.flow.component.flexlayout.BlockLayout;
import de.mate_ds.flow.component.flexlayout.BlockLayoutVariant;

Variants ​

Three blocks 4-4-4 ​

java
BlockLayout blockLayout = new BlockLayout();
blockLayout.setSpacing(true);
blockLayout.add(new Div("Layout 4-4-4, Block 1"), new Div("Layout 4-4-4, Block 2"), new Div("Layout 4-4-4, Block 3"));
Div container = BlockLayout.createContainer(blockLayout);

Two blocks 8-4 ​

java
BlockLayout blockLayout = new BlockLayout();
blockLayout.setSpacing(true);
blockLayout.addThemeName(BlockLayoutVariant.LAYOUT_8_4.getVariantName());
blockLayout.add(new Div("Layout 8-4, Block 1"), new Div("Layout 8-4, Block 2"));
Div container = BlockLayout.createContainer(blockLayout);

Two blocks 4-8 ​

java
BlockLayout blockLayout = new BlockLayout();
blockLayout.setSpacing(true);
blockLayout.addThemeName(BlockLayoutVariant.LAYOUT_4_8.getVariantName());
blockLayout.add(new Div("Layout 4-8, Block 1"), new Div("Layout 4-8, Block 2"));
Div container = BlockLayout.createContainer(blockLayout);

Two blocks 6-6 ​

java
BlockLayout blockLayout = new BlockLayout();
blockLayout.setSpacing(true);
blockLayout.addThemeName(BlockLayoutVariant.LAYOUT_6_6.getVariantName());
blockLayout.add(new Div("Layout 6-6, Block 1"), new Div("Layout 6-6, Block 2"));
Div container = BlockLayout.createContainer(blockLayout);

One block 12 ​

java
BlockLayout blockLayout = new BlockLayout();
blockLayout.setSpacing(true);
blockLayout.addThemeName(BlockLayoutVariant.LAYOUT_12.getVariantName());
blockLayout.add(new Div("Layout 12"));
Div container = BlockLayout.createContainer(blockLayout);

Double bottom padding ​

java
BlockLayout blockLayout = new BlockLayout();
blockLayout.setSpacing(true);
blockLayout.setDoubleBottomPadding(true);
blockLayout.add(new Div("Layout 4-4-4, Block 1"), new Div("Layout 4-4-4, Block 2"), new Div("Layout 4-4-4, Block 3"));
Div container = BlockLayout.createContainer(blockLayout);