Column

Column {
    Text("First")
    Text("Second")
    Text("Third")
}

import JavaScriptKit
import Shaft
import ShaftWeb

// Setup ShaftWeb backend for running in ShaftPad
Shaft.backend = ShaftWebBackend { _ in
    JSObject.global.document.querySelector("canvas")
}

class ColumnDemoView: StatelessWidget {
    func build(context: any BuildContext) -> any Widget {
        Column(spacing: 16) {
            Text("Item 1")
                .textStyle(.init(color: Color(0xFF_FFFFFF)))
                .padding(.all(20))
                .decoration(.box(color: Color(0xFF_FF3B30), borderRadius: .circular(8)))

            Text("Item 2")
                .textStyle(.init(color: Color(0xFF_FFFFFF)))
                .padding(.all(20))
                .decoration(.box(color: Color(0xFF_FF9500), borderRadius: .circular(8)))

            Text("Item 3")
                .textStyle(.init(color: Color(0xFF_FFFFFF)))
                .padding(.all(20))
                .decoration(.box(color: Color(0xFF_34C759), borderRadius: .circular(8)))
        }
        .center()
    }
}

runApp(ColumnDemoView())

Column(mainAxisAlignment: .start) { }    // Top (default)
Column(mainAxisAlignment: .center) { }   // Center
Column(mainAxisAlignment: .end) { }      // Bottom
Column(mainAxisAlignment: .spaceBetween) { }  // Distribute space

Column(crossAxisAlignment: .start) { }   // Left
Column(crossAxisAlignment: .center) { }  // Center (default)
Column(crossAxisAlignment: .end) { }     // Right
Column(crossAxisAlignment: .stretch) { } // Fill width

Column(spacing: 12) {
    Text("Item 1")
    Text("Item 2")  // 12px below
    Text("Item 3")
}

Column {
    Text("Header")
    
    Expanded {
        ScrollView { }  // Takes remaining space
    }
    
    Text("Footer")
}