How to Create a Three-Column Flexbox Layout with Fixed-Width Outer Columns?

Three-Column Flexbox Layout with Fixed Width Outer Columns

You're attempting to establish a three-column flexbox layout with fixed-width outer columns and a flexible center column. Despite defining the dimensions for these columns, they appear to shrink as the viewport narrows.

Solution

The key to this layout is utilizing flex instead of width. Replace width with the flex property in your CSS:

#container {
  display: flex;
}

.column.left,
.column.right {
  flex: 0 0 230px;
}

Here's what each value in the flex property signifies:

• 0 for flex-grow: This prevents the columns from growing beyond their initial width.
• 0 for flex-shrink: This prevents the columns from shrinking below their initial width.
• 230px for flex-basis: This sets the initial width of the columns to 230px.

By setting these properties, you define fixed dimensions for the outer columns that will remain constant even as the viewport changes.

Additional Note

For the optional requirement of hiding the right column, simply set the display property of .column.right to none:

.column.right {
  display: none;
}

This will hide the right column while preserving the fixed width of the left column and the flexible width of the center column.

The above is the detailed content of How to Create a Three-Column Flexbox Layout with Fixed-Width Outer Columns?. For more information, please follow other related articles on the PHP Chinese website!