Complete Guide to Setting Fixed Width Columns with CSS Flexbox

Principles of Implementing Fixed Width Columns in Flexbox

Setting fixed-width columns is a common requirement in CSS Flexbox layouts, but many developers encounter unexpected issues when implementing this feature. This article begins with an analysis of Flexbox's sizing calculation mechanism to provide detailed insights into correctly implementing fixed-width columns.

Problem Analysis: Why the width Property Fails in Flexbox

Many developers habitually use the width property to set column widths, but this often fails to achieve the desired results in Flexbox layouts. When setting .flexbox .red { width: 25em; } within a media query, elements may still scale according to available space due to Flexbox's specific priority rules for size calculation.

Using the flex Property for Fixed Width Implementation

The flex property is the preferred solution for setting fixed-width columns. This is a shorthand property that includes three sub-properties: flex-grow, flex-shrink, and flex-basis.

.flexbox .red {
  flex: 0 0 25em;
}

This declaration means:

• flex-grow: 0 - The element will not grow to fill extra space
• flex-shrink: 0 - The element will not shrink to fit limited space
• flex-basis: 25em - The element's initial size is 25em

Flexbox Sizing Calculation Mechanism

Understanding Flexbox's sizing calculation order is crucial for correctly setting fixed widths. When flex-direction is set to row (default value), size calculation follows this order:

content width → width → flex-basis (limited by max-width and min-width)

Key points to note:

• When flex-basis is set to any value other than auto, it overrides the width property
• When flex-basis is auto or unspecified, it first checks the width property, and if none is set, uses the element's content width
• flex-basis still respects max-width and min-width constraints

Complete Example: Fixed Width Implementation in Three-Column Layout

Here's a complete three-column layout example where the first column is fixed at 50px width, and the remaining two columns equally share the available space:

<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

.flexbox {
  display: flex;
}

.flexbox > div {
  outline: 1px solid;
}

.red {
  flex: 0 0 50px;
  color: red;
}

.green {
  flex: 1;
  color: green;
}

.blue {
  flex: 1;
  color: blue;
}

Comparison of Alternative Implementation Methods

Beyond using the flex property, other methods can achieve fixed-width columns:

Using min-width and max-width

Setting min-width and max-width to the same value effectively fixes the column width:

.column {
  flex: 0 0 auto;
  min-width: 200px;
  max-width: 200px;
}

Setting flex-grow, flex-shrink, and flex-basis Separately

The same effect can be achieved by setting the three properties individually:

.column {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px;
}

Best Practice Recommendations

Based on practical development experience, it's recommended to prioritize using flex-basis over width/height for setting Flexbox item dimensions. This ensures consistent results across different browsers and devices. Additionally, understanding Flexbox's sizing calculation mechanism helps make correct design decisions in complex layout scenarios.

Application in Vertical Direction

When flex-direction is set to column, the same principles apply to height control. The size calculation order becomes:

content height → height → flex-basis (limited by max-height and min-height)

This means that in vertical layouts, the same techniques can be used to set fixed-height rows.