How to have equal spacing on a scrollbox/hbox

Support
#1

Hi,
I have a scrollbox, and in it an hbox which dynamically displays images. I want the images to be equally spaced apart, however, they are not:
image
image

List<AuditImages> auditImages = selectEvent.getImages().stream()
                        .filter(e -> checkImageSideType(e, side.name(), type.name())).collect(Collectors.toList());
                auditImages.forEach(auditImage -> {
                    Image<FileRef> image = uiComponents.create(Image.NAME);
                    image.setCaption(side.getId() + " " + type.getId());
                    image.setScaleMode(Image.ScaleMode.SCALE_DOWN);
                    image.setSizeFull();
                    try {
                        image.setSource(UrlResource.class).setUrl(new URL(auditImage.getImageUrl()));
                    } catch (MalformedURLException e) {
                        e.printStackTrace();
                    }
                    if (side.getId().equals(VehicleSideEnum.FRONT.getId())) {
                        frontImg.add(image);
                    } else if (side.getId().equals(VehicleSideEnum.REAR.getId())) {
                        rearImg.add(image);
                    }

                    image.addClickListener(clickEvent -> {
                        popupImage.setSource(image.getSource());
                        popupImage.setCaption(side.getId() + " " + type.getId());
                        popupView.setPopupVisible(true);
                    });
                });

How can I make it so the images have equal spacing between them, so the display is cleaner?

#2

Looks like images has different width/height so you need to scale then to some width.