import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

Control {
    background: Rectangle {
        color: "grey"
    }
    contentItem: FlexboxLayout {
        direction: FlexboxLayout.Column
        gap: 10

        Control {
            background: Rectangle {
                color: "green"
            }
            contentItem: FlexboxLayout {
                gap: 50

                Repeater {
                    model: 5

                    Box {
                        color: "blue"
                    }
                }
            }
        }
        Control {
            Layout.fillWidth: true

            background: Rectangle {
                color: "green"
            }
            contentItem: FlexboxLayout {
                gap: 2
                wrap: FlexboxLayout.Wrap

                Repeater {
                    model: 10

                    Box {
                    }
                }
            }
        }
        Control {
            Layout.fillHeight: true

            background: Rectangle {
                color: "green"
            }
            contentItem: FlexboxLayout {
                direction: FlexboxLayout.Column
                gap: 2
                wrap: FlexboxLayout.Wrap

                Repeater {
                    model: 10

                    Box {
                    }
                }
            }
        }
    }

    component Box: Rectangle {
        color: "blue"
        height: 20
        opacity: 0.3
        width: 20
    }
}