How to make flex box layout?

Vaadin 6 / 7 / 8 Framework UI
1

I wonder how to implement layout like this example:
http://css-tricks.com/filling-space-last-row-flexbox/

Is this possible with CssLayout and Vaadin components?

2

Just a simple test…

@Override
protected void init(VaadinRequest request) {
  CssLayout contentLayout = new CssLayout();
  contentLayout.setSizeFull();
  setContent(contentLayout);

  final CssLayout parentLayout = new CssLayout();
  parentLayout.addStyleName("parent");

  for (int i = 0; i < 10; i++) {
    parentLayout.addComponent(createChild());
  }

  Button button = new Button("Add Child", new Button.ClickListener() {
    @Override
    public void buttonClick(ClickEvent event) {
      parentLayout.addComponent(createChild());
    }
  });

  contentLayout.addComponents(button, parentLayout);
}

CSS

.parent {
  display: flex;
  flex-wrap: wrap;
}
  
.child {
  height: 50px;
  background: red;
  flex: 1;
  min-width: 25%;
  border: 5px solid white;
}

Seems to work. Vaadin 7.3.2, Valo as theme.

3

Tnx. Works perfectlly.