When you change a flex container’s display to table, the element stops behaving as a flex container. Flexbox properties like flex-direction, justify-content, and align-items no longer apply, because the element is now treated as a CSS table container.

Key Effects

1
The container loses all flex layout behavior; its children are laid out according to table rules.
2
Children behave as table rows or table cells depending on their own display values (table-row, table-cell).
3
Margins, padding, and alignment work differently compared to flex layout, and vertical/horizontal centering is affected.
4
Any BFC behavior created by display: flex is replaced by table layout rules, though the container still participates in normal block flow.

Example: Flex to Table

In this example, the container behaves like a table, and each child element becomes a table cell. Flex properties no longer affect layout, and table-specific rules control the sizing and alignment of children.

Best Practices

1
Do not mix flex properties with display: table; choose one layout model for consistency.
2
Use display: table only when table-like layout behavior is desired, such as equal-height columns or row/column alignment.
3
For responsive designs, flex or grid is usually more flexible than table display.
4
Remember that changing display types can affect margin collapsing, BFC behavior, and accessibility.

Difficulty: 5/10

Topics: display property interaction, layout models, CSS specificity

Scenario Questions

0-2 years experience

1
You have a component styled with display:flex and you accidentally add display:table. What will the browser render, and how will the children behave?
2
If you need the children to stay in a flex layout, what change would you make to the CSS?

2-5 years experience

1
During a code review you notice a modal component using both display:flex and display:table. The layout is broken on Chrome. Walk me through how you'd debug this and decide which display to keep.
2
Explain why justify-content: center stopped working after a teammate added display: table to the container. What trade‑offs are you considering when fixing it?

5-8 years experience

1
We're building a reusable card component that sometimes needs to act like a table for legacy integration but otherwise should be a flex container. How would you architect the CSS to avoid conflicts when display: table is applied?
2
Discuss the performance and rendering implications of toggling between flex and table layouts on a large list of items. How would you mitigate any issues?

8+ years experience

1
Our design system currently mixes utility classes that set display:flex and others that set display:table. Teams report unexpected layout bugs. As a staff engineer, how would you restructure the CSS architecture to prevent such conflicts across the organization?
2
We need to migrate a legacy admin dashboard built with table layouts to a modern flex‑based UI without breaking existing pages. Outline a migration strategy that handles cases where both display values might be present.

Follow-up Questions

❓What CSS rule determines which `display` value takes precedence?
❓How would you test that the flex properties are no longer applied after the change?
❓Can you think of any browsers where the behavior differs or has known bugs?