Revision control
++ // Copyright (C) 2025 The Qt Company Ltd.
++ // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
++
++ import QtQuick
++ import QtQuick.Controls
++ import QtQuick.Layouts
++ import QtQuick.Effects
++
++ pragma ComponentBehavior: Bound
++
++ ApplicationWindow {
++ id: window
++ visible: true
++ width: 480
++ height: 640
++ title: "QML Flexbox Layout"
++
++ ColumnLayout {
++ id: content
++ property int count: 10
++ anchors.fill: parent
++ Rectangle {
++ id: mainContent
++ Layout.preferredWidth: col.implicitWidth
++ Layout.preferredHeight: col.implicitHeight
++ Layout.fillWidth: true
++ Layout.fillHeight: true
++ Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
++ clip: true
++ border.width: 1
++ border.color: "gray"
++ color: "transparent"
++ ColumnLayout {
++ id: col
++ anchors.fill: parent
++ FlexboxLayout {
++ id: flex
++ wrap: FlexboxLayout.Wrap
++ gap: 10
++ justifyContent: FlexboxLayout.JustifyCenter
++ Layout.margins: 20
++ Repeater {
++ model: content.count
++ delegate: Rectangle {
++ id: rect
++ property int size: Math.floor(Math.random() * (140 - 85 + 1)) + 85
++ Layout.preferredWidth: size
++ Layout.preferredHeight: size
++ radius: 10
++ color: "#328930"
++ Text {
++ anchors.centerIn: parent
++ text: "Qt"
++ font.pixelSize: 20
++ }
++ }
++ }
++ }
++ }
++ }
++ Text {
++ Layout.margins: 20
++ Layout.alignment: Qt.AlignHCenter
++ text: "Resize the window to observe how the flex layout adapts."
++ Layout.fillWidth: true
++ wrapMode: Text.Wrap
++ }
++ }
++ }