Questions

43 of 51

1What is Flexbox in CSS?

2What problem does Flexbox solve compared to traditional layouts like float or inline-block?

3How do you create a flex container?

4What are the main and cross axes in Flexbox?

5What does the display: flex property do?

6What is the difference between display: flex and display: inline-flex?

7What are flex items?

8How do you change the direction of items in a flex container?

9What does flex-direction: row do?

10What does flex-direction: column do?

11What is the purpose of the justify-content property?

12What does the align-items property control?

13What are the possible values of align-content?

14What is the difference between align-items and align-content?

15What is the use of the flex-wrap property?

16How can you make flex items wrap onto multiple lines?

17What does the flex-flow shorthand property do?

18How does the order property affect flex items?

19How does the align-self property work?

20How do you vertically center content using Flexbox?

21What does the flex shorthand property represent?

22What are the three components of the flex shorthand property?

23What is the default value of the flex property?

24How do flex-grow, flex-shrink, and flex-basis work individually?

25What is the difference between flex: 1 and flex: auto?

26What is the difference between flex: 1 and flex: auto?

27What is the purpose of the gap property in Flexbox?

28How does Flexbox handle overflowing content?

29What’s the difference between justify-content: space-around and space-between?

30How does Flexbox handle fixed and flexible widths together?

31Can Flexbox be nested?

32How is Flexbox different from CSS Grid?

33When would you use Flexbox instead of Grid?

34Can you use Flexbox and Grid together in the same layout?

35How does Flexbox differ from traditional float-based layouts?

36Does Flexbox affect the box model or positioning of elements?

37How does Flexbox handle min-width and max-width constraints?

38How do flex items align when the container has align-items: stretch?

39What is the difference between flex: 0 1 auto and flex: 1 0 auto?

40How does flex-basis differ from width?

41How do you prevent a flex item from shrinking?

42How would you create a horizontal navigation bar using Flexbox?

43How do you center a div both horizontally and vertically using Flexbox?

44How can you make a responsive layout using Flexbox?

45How can you make one flex item take up the remaining space in a container?

46How do you create equal-height columns using Flexbox?

47How can you align the last flex item to the right side of the container?

48How can you reorder items visually using Flexbox without changing the HTML structure?

49How can you make items stack vertically on mobile and horizontally on desktop using Flexbox?

50How do you prevent an element from wrapping in a flex container?

51How can you align items to the bottom of a container using Flexbox?

CSS

Text formatters

Pseudo elements

Transformation and Transition

Everything else

43 / 51

How do you center a div both horizontally and vertically using Flexbox?

Centering a Div with Flexbox

Flexbox makes it simple to center a div horizontally and vertically by aligning items along both the main and cross axes.

Key Steps

1
Set the parent container's display to flex.
2
Use justify-content: center to center items along the main axis (horizontal by default).
3
Use align-items: center to center items along the cross axis (vertical by default).
4
Optionally, use height on the container to ensure vertical centering works if the container has limited height.

Example: Centering a Div

In this example, the .box div is perfectly centered both horizontally and vertically within the .container using Flexbox properties.

Difficulty: 3/10

Topics: flex-direction, justify-content, align-items

Scenario Questions

0-2 years experience

1
How would you center a login card inside a full-height page using Flexbox?
2
What happens if you forget to set height: 100% on the parent container when trying to center vertically?

2-5 years experience

1
A modal popup is centered on desktop but shifts off-screen on mobile — what could be breaking the Flexbox centering, and how would you debug it?
2
Your team’s design system uses Flexbox to center buttons in card headers, but sometimes they’re misaligned after a font size change — why might that happen?

5-8 years experience

1
You’re building a responsive dashboard layout where components must stay centered regardless of viewport size or content height — how would you design this to avoid layout thrashing or overflow issues?
2
How would you handle centering a div that contains both text and an image with different aspect ratios, ensuring visual balance across devices without hardcoding dimensions?

8+ years experience

1
Your company is migrating from a legacy absolute-positioning centering system to Flexbox — what cross-team coordination, testing, and fallback strategies would you propose to avoid breaking hundreds of existing components?
2
When designing a global UI component library, how do you balance the simplicity of Flexbox centering against accessibility, screen reader behavior, and legacy browser support requirements?

Follow-up Questions

❓What if the child div has dynamic content that might overflow?
❓How would this behave if the parent had padding or a border?
❓Why not use grid instead?