> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/view/layout/grids/griditem/flexible-column.md).

# flexible column

[SwiftUI](/ios/swiftui.md) ⟩ [Layout](/ios/swiftui/view/layout.md) ⟩ [Grids](/ios/swiftui/view/layout/grids.md) ⟩ flexible column

{% tabs %}
{% tab title="💈範例" %}
{% hint style="warning" %}
&#x20;雖然本範例的兩個欄位都是 <mark style="color:red;">**flexible columen**</mark> 有且最小寬度 <mark style="color:purple;">**minimum**</mark> 屬性分別為 <mark style="color:red;">**50, 120**</mark>：

```swift
let columns = [
    GridItem(.flexible(minimum: 50)),    // ⭐ flexible
    GridItem(.flexible(minimum: 120))    // ⭐ flexible
]
```

但真正跑出來的欄位寬度，卻超乎我們的想像。
{% endhint %}

![final layout](/files/sNfJTnYpFn5XsygkyvxT) ![2 passes](/files/geliZPbNH1tEBLrLSsDS) ![screenshot](/files/VY3pQyvH1sxN7HqwYr2P)

⬆️ 需要： 👔 [VGridForEach](/ios/swiftui/view/layout/grids/vgridforeach.md)

```swift
struct ContentView: View {
    
    let columns = [
        GridItem(.flexible(minimum: 50)),    // ⭐ flexible
        GridItem(.flexible(minimum: 120))    // ⭐ flexible
    ]
    
    var body: some View {
        grid(columns)
    }
}

extension ContentView {
    
    /// a grid of swatches
    func grid(_ columns: [GridItem]) -> some View {
        // 👔 VGridForEach
        VGridForEach(0..<6, columns: columns){ 
            numberSwatch($0)
        }
        .frame(width: 200)        // grid width = scroll view width ⭐ 
        .border(Color.yellow)     // scroll view border (yellow)
        .padding()
        .border(Color.blue)       // padding border (blue)
        .frame(height: 300)
    }
    
    /// a color swatch with a number on it
    @ViewBuilder func numberSwatch(_ i: Int) -> some View {
        let color: Color = i % 2 == 0 ? .green : .pink
        color
            .opacity(0.5)
            .frame(height: 40)
            .overlay(Text("\(i)").font(.title))
    }
}
```

{% hint style="info" %}
欄位寬度的計算方式：👉 [grid layout algorithm](/ios/swiftui/view/layout/grids/layout-algorithm.md)
{% endhint %}

```swift
// initial values
r = 200    // remaining width (intial = grid width)
n = 2      // # of remaining cols

// r -= (fixed widths) + (spacing between cols)
r -= 8     // 192

// 1st col width
w1 = clamp(r/n)     // 192/2 = 96
   = 96             // clamped to [50, .inf)

// update r, n
r -= w1             // 192 - 96 = 96
n -= 1              // 1

// 2nd col width
w2 = clamp(r/n)      // 96/1 = 96
   = 120             // clamped to [120, .inf) ⭐

// overall width
W = 96 + 8 + 120
  = 224               // larger than original (200) ⭐
                      // frame stretched out 12 pts both sides
                      
// ----------------------------
//     2nd (rendering) pass 
// ----------------------------

r = W     // 224: start with overall width
n = 2     // # of remaining cols

// r -= (fixed widths) + (spacing between cols)
r -= 8             // 216

// 1st col width
w1 = clamp(r/n)    // 216/2 = 108
   = 108           // clamped to [50, .inf)
   
// update r, n
r -= w1            // 108
n -= 1             // 1

// 2nd col width
w2 = clamp(r/n)     // 108/1 = 108
   = 120            // clamped to [120, .inf)
   
// overall width
W = 108 + 8 + 120    // final layout ⭐
  = 236              // grid appears out of center by 6 pts ⭐
```

{% endtab %}

{% tab title="📘 手冊" %}

* SwiftUI ⟩ Layout ⟩ [LazyVGrid](https://developer.apple.com/documentation/swiftui/lazyvgrid) ⟩ [.init(columns:alignment: ...)](https://developer.apple.com/documentation/swiftui/lazyvgrid/init\(columns:alignment:spacing:pinnedviews:content:\))
  {% endtab %}

{% tab title="📗 參考" %}

* [x] objc ⟩ [SwiftUI’s Grid Views](https://www.objc.io/blog/2020/11/23/grid-layout/) ⭐️⭐️ - how **flexible**/**adaptive** columns behave. (💈例一)
  {% endtab %}

{% tab title="👥 相關" %}

* [grid layout algorithm](/ios/swiftui/view/layout/grids/layout-algorithm.md)
* [adaptive column](/ios/swiftui/view/layout/grids/griditem/adaptive-column.md)
  {% endtab %}
  {% endtabs %}