# NKContentVerticalAlignment.fill vs NKContentVerticalAlignment.fit in FrameLayoutKit: A Complete Comparison

> Understand NKContentVerticalAlignment fill vs fit for your FrameLayoutKit. Learn how fill stretches content and fit centers it. Optimize your layouts now.

- Repository: [Nam Kennic/framelayoutkit](https://github.com/kennic/framelayoutkit)
- Tags: deep-dive
- Published: 2026-03-05

---

**NKContentVerticalAlignment.fill forces the target view to stretch and occupy the full height of the FrameLayout container, while NKContentVerticalAlignment.fit preserves the view's intrinsic content height and centers it vertically within the available space.**

FrameLayoutKit by kennic provides a lightweight yet powerful layout system for iOS that relies on alignment enums to determine how child views are positioned and sized. Understanding the difference between NKContentVerticalAlignment.fill and NKContentVerticalAlignment.fit is critical for controlling whether a view expands to fill its container or maintains its natural dimensions. These alignment behaviors are implemented in the core layout engine within [`FrameLayout.swift`](https://github.com/kennic/framelayoutkit/blob/main/FrameLayout.swift).

## How Vertical Alignment Controls Sizing in FrameLayout

The `NKContentVerticalAlignment` enum determines how the **target view** calculates its frame rectangle during the layout pass. According to the source code in `kennic/framelayoutkit`, the layout engine evaluates this alignment setting to derive both the `targetFrame.size.height` and `targetFrame.origin.y` values. The distinction between `.fill` and `.fit` fundamentally changes whether the view respects its intrinsic content size or yields to the container's boundary constraints.

## NKContentVerticalAlignment.fill: Stretch to Container Height

When you configure `alignment.vertical = .fill`, the layout engine ignores the target view's intrinsic size and forces it to **occupy the entire vertical space** of the FrameLayout. This behavior is defined in [`FrameLayout.swift`](https://github.com/kennic/framelayoutkit/blob/main/FrameLayout.swift) at lines 529-532:

```swift
case .fill:
    targetFrame.origin.y = containerFrame.minY
    targetFrame.size.height = containerFrame.height
    break

```

The implementation pins the view's top edge to the container's minimum Y boundary and sets the height equal to `containerFrame.height`. Use this alignment for background views, separators, or any element that must expand to match its parent's full vertical bounds regardless of content.

## NKContentVerticalAlignment.fit: Respect Intrinsic Height

The `.fit` alignment allows the target view to maintain its **natural content height** while remaining vertically centered inside the container. As implemented in [`FrameLayout.swift`](https://github.com/kennic/framelayoutkit/blob/main/FrameLayout.swift) at lines 534-543, the sizing logic respects the `allowContentVerticalGrowing` property:

```swift
case .fit:
    if allowContentVerticalGrowing {
        targetFrame.size.height = max(containerFrame.height, contentSize.height)
    } else {
        targetFrame.size.height = min(containerFrame.height, contentSize.height)
    }
    targetFrame.origin.y = containerFrame.minY + (containerFrame.height - targetFrame.height) / 2
    break

```

By default, the height becomes the smaller of the container height and the content's intrinsic height, though enabling `allowContentVerticalGrowing` permits expansion. The view is always **mathematically centered** using the calculation `(containerFrame.height - targetFrame.height) / 2`. This alignment is ideal for UILabels, UIImageViews, or buttons that should retain their content-driven sizing.

## Practical Code Examples

The following examples demonstrate how to apply these alignments in real FrameLayout configurations.

### Filling the Container Height

```swift
let backgroundView = UIView()
backgroundView.backgroundColor = .systemIndigo

let layout = FrameLayout()
layout.targetView = backgroundView
layout.alignment.vertical = .fill  // Stretches to match container height
layout.padding = .zero

```

### Fitting and Centering Content

```swift
let messageLabel = UILabel()
messageLabel.text = "Hello World"
messageLabel.sizeToFit()

let layout = FrameLayout()
layout.targetView = messageLabel
layout.alignment.vertical = .fit   // Keeps intrinsic height, centers vertically
layout.padding = UIEdgeInsets(top: 12, left: 20, bottom: 12, right: 20)

```

## Summary

- **NKContentVerticalAlignment.fill** stretches the target view to match the container's full height by setting `targetFrame.size.height = containerFrame.height` and aligning the top edge to `containerFrame.minY`.
- **NKContentVerticalAlignment.fit** calculates height as the minimum (or maximum if growing is allowed) of the container and content sizes, then centers the view vertically using `(containerFrame.height - targetFrame.height) / 2`.
- Both behaviors are defined in the switch-case logic starting at line 529 of [`FrameLayout.swift`](https://github.com/kennic/framelayoutkit/blob/main/FrameLayout.swift) in the `kennic/framelayoutkit` repository.
- Use `.fill` for decorative backgrounds or dividers, and `.fit` for text, images, or controls that require natural sizing with vertical centering.

## Frequently Asked Questions

### When should I choose .fill over .fit for vertical alignment?

Choose **NKContentVerticalAlignment.fill** when the view must expand to occupy all available vertical space regardless of its content, such as background layers or separator lines. Choose **NKContentVerticalAlignment.fit** when the view has an intrinsic content size—like a UILabel or UIButton—and you want it to maintain that natural height while being centered within the layout container.

### Does .fit allow content to grow larger than the container?

Yes. When the `allowContentVerticalGrowing` property is set to `true`, the `.fit` alignment uses `max(containerFrame.height, contentSize.height)` to determine the target height, allowing the view to expand beyond the container if its content requires more space. By default, this property is `false`, which clamps the height to the smaller of the two values.

### How is the vertical position calculated differently between these two alignments?

With **.fill**, the `targetFrame.origin.y` is set directly to `containerFrame.minY`, pinning the view to the top of the container. With **.fit**, the origin is calculated as `containerFrame.minY + (containerFrame.height - targetFrame.height) / 2`, which positions the view so that equal space exists above and below it, achieving vertical centering.