How Can I Create a Three-Column Flexbox Layout with Fixed-Width Side Columns and a Flexible Center Column?

Maintaining Fixed Width Columns with Flexible Center

You are seeking to design a flexbox layout with three columns, where the left and right columns maintain a fixed width, while the center column expands to occupy the remaining space. Despite setting dimensions for the columns, they undesirably shrink as the window size adjusts.

Solution

To achieve your desired layout, replace the width property with the following flex specification for the fixed-width columns:

flex: 0 0 230px;

This specification signifies:

• 0 for flex-grow: do not expand the column.
• 0 for flex-shrink: do not compress the column.
• 230px for flex-basis: set the initial width to 230px.

In essence, this configuration ensures that the columns remain at 230px regardless of the window size.

Additional Feature

Regarding your additional requirement to conceal the right column based on user interaction, while maintaining the fixed width of the left column and expanding the center column accordingly, you can incorporate the following:

.column.center {
  flex: 1 0 calc(100% - 230px);
}

This modification ensures that when the right column is hidden, the center column fills the remaining space while the left column remains fixed at 230px.

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