Android WebViews prior to version 4.4 do not fully support the modern CSS Flexible Box Layout (display: flex). Instead, these environments rely on an older, prefixed specification: display: -webkit-box. Understanding this legacy syntax is crucial for ensuring layout compatibility on older Android devices.

The -webkit-box model applies specific properties to both the flex container (parent element) and the flex items (child elements).

Properties for Flex Containers

These properties are applied to the parent element, which becomes a flex container.

• display: -webkit-box; This declaration transforms an element into a flex container, causing its direct children to become flex items. Only immediate children participate in the flex layout.
• -webkit-box-orient: horizontal | vertical; Defines the primary axis along which flex items are arranged.
  • horizontal (default): Items arrange from left to right.
  • vertical: Items arrange from top to bottom.
• -webkit-box-pack: start | end | center | justify; Controls how flex items are aligned along the box-orient (main) axis.
  • start: Items are packed toward the beginning of the container.
  • end: Items are packed toward the end of the container.
  • center: Items are centered along the main axis.
  • justify: Items are distributed evenly with space between them.
• -webkit-box-align: start | end | center | baseline | stretch; Controls how flex items are aligned along the cross-axis, perpendicular to the box-orient axis.
  • start: Items align to the start of the cross-axis.
  • end: Items align to the end of the cross-axis.
  • center: Items are centered along the cross-axis.
  • baseline: Items align their baselines.
  • stretch (default): Items stretch to fill the container along the cross-axis.

Properties for Flex Items

This property is applied to the child elements within a -webkit-box container.

• -webkit-box-flex: <number>; Specifies how much a flex item should grow relative to other flex items when there's available space in the container. A value of 0 means the item will not grow. Higher numbers indicate greater growth proportion.

Practical Examples

The following examples demonstrate how to utilize these legacy Flexbox properties.

Example 1: Distributing Space Horizontally

This setup shows how three flex items divide available horizontal space based on their -webkit-box-flex values. The container itself is centered within a wrapper.

<style>
    .global-wrapper {
        display: -webkit-box;
        -webkit-box-pack: center; /* Center the .flex-container */
        border: 1px solid #ccc;
        padding: 10px 0;
    }
    .flex-container {
        width: 500px;
        height: 180px;
        display: -webkit-box;
        -webkit-box-orient: horizontal; /* Explicit horizontal arrangement */
        background-color: #f0f0f0;
    }
    .flex-item-a {
        background: lightblue;
        -webkit-box-flex: 1; /* Occupies 1/6 of available space */
        text-align: center;
        line-height: 180px;
    }
    .flex-item-b {
        background: lightgray;
        -webkit-box-flex: 2; /* Occupies 2/6 of available space */
        text-align: center;
        line-height: 180px;
    }
    .flex-item-c {
        background: lightgreen;
        -webkit-box-flex: 3; /* Occupies 3/6 of available space */
        text-align: center;
        line-height: 180px;
    }
</style>

<div class="global-wrapper">
    <div class="flex-container">
        <div class="flex-item-a">Item A (flex: 1)</div>
        <div class="flex-item-b">Item B (flex: 2)</div>
        <div class="flex-item-c">Item C (flex: 3)</div>
    </div>
</div>

In this case, if the total box-flex sum is 6 (1+2+3), flex-item-a takes 1/6, flex-item-b takes 2/6, and flex-item-c takes 3/6 of the remaining space after initial sizing.

Example 2: Horizontal Distribution with a Fixed-Width Item

This example demonstrates how box-flex distributes space among items when one item has a predefined, fixed width.

<style>
    .global-wrapper-alt {
        display: -webkit-box;
        -webkit-box-pack: center;
        border: 1px solid #ccc;
        padding: 10px 0;
    }
    .flex-container-alt {
        width: 550px; /* Adjusted width for demonstration */
        height: 160px;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        background-color: #f9f9f9;
    }
    .flex-item-x {
        background: #ADD8E6; /* Light Blue */
        -webkit-box-flex: 1;
        text-align: center;
        line-height: 160px;
    }
    .flex-item-y {
        background: #D3D3D3; /* Light Gray */
        -webkit-box-flex: 2;
        text-align: center;
        line-height: 160px;
    }
    .flex-item-z {
        background: #90EE90; /* Light Green */
        width: 150px; /* Fixed width */
        margin: 0 10px; /* Horizontal margin */
        text-align: center;
        line-height: 160px;
    }
</style>

<div class="global-wrapper-alt">
    <div class="flex-container-alt">
        <div class="flex-item-x">Item X (flex: 1)</div>
        <div class="flex-item-y">Item Y (flex: 2)</div>
        <div class="flex-item-z">Item Z (150px fixed)</div>
    </div>
</div>

Here, the flex-item-z occupies a fixed 150px plus its margins (2 * 10px = 20px). The remaining width (550px - 150px - 20px = 380px) is then divided between flex-item-x (1/3) and flex-item-y (2/3) based on their box-flex values.

Example 3: Vertical Distribution with a Fixed-Height Item

This demonstrates a vertical layout where items are arranged top-to-bottom, and one item has a fixed height.

<style>
    .global-wrapper-vertical {
        display: -webkit-box;
        -webkit-box-pack: center; /* Center the flex container horizontally */
        border: 1px solid #ccc;
        padding: 10px 0;
    }
    .flex-container-vertical {
        width: 300px;
        height: 500px;
        display: -webkit-box;
        -webkit-box-orient: vertical; /* Vertical arrangement */
        background-color: #eee;
    }
    .v-flex-item-alpha {
        background: #ADD8E6;
        -webkit-box-flex: 1;
        text-align: center;
        padding-top: 20px;
    }
    .v-flex-item-beta {
        background: #D3D3D3;
        -webkit-box-flex: 2;
        text-align: center;
        padding-top: 20px;
    }
    .v-flex-item-gamma {
        background: #90EE90;
        height: 180px; /* Fixed height */
        margin: 10px 0; /* Vertical margin */
        text-align: center;
        line-height: 180px;
    }
</style>

<div class="global-wrapper-vertical">
    <div class="flex-container-vertical">
        <div class="v-flex-item-alpha">Alpha (flex: 1)</div>
        <div class="v-flex-item-beta">Beta (flex: 2)</div>
        <div class="v-flex-item-gamma">Gamma (180px fixed)</div>
    </div>
</div>

With box-orient: vertical, box-flex now dictates the vertical distribution of space. After v-flex-item-gamma takes its fixed height and margins, the remaining vertical space is shared by v-flex-item-alpha (1/3) and v-flex-item-beta (2/3).

Example 4: Cross-Axis Alignment

This illustrates how box-align can vertically center items when the main axis is horizontal, even if items have different heights.

<style>
    .global-wrapper-alignment {
        display: -webkit-box;
        -webkit-box-pack: center;
        border: 1px solid #ccc;
        padding: 10px 0;
    }
    .flex-container-alignment {
        width: 450px;
        height: 220px;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-align: center; /* Vertically center items */
        background-color: #f5f5f5;
    }
    .align-item-1 {
        background: #ADD8E6;
        -webkit-box-flex: 1;
        height: 90px; /* Different heights */
        text-align: center;
        line-height: 90px;
    }
    .align-item-2 {
        background: #D3D3D3;
        -webkit-box-flex: 2;
        height: 120px; /* Different heights */
        text-align: center;
        line-height: 120px;
    }
    .align-item-3 {
        background: #90EE90;
        -webkit-box-flex: 3;
        height: 150px; /* Different heights */
        text-align: center;
        line-height: 150px;
    }
</style>

<div class="global-wrapper-alignment">
    <div class="flex-container-alignment">
        <div class="align-item-1">Height: 90px</div>
        <div class="align-item-2">Height: 120px</div>
        <div class="align-item-3">Height: 150px</div>
    </div>
</div>

With -webkit-box-orient: horizontal, the main axis is horizontal. Therefore, -webkit-box-align: center centers the flex items along the vertical (cross) axis, despite their varying individual heights.