Interview Questions of CSS-Display
Q1 Imagine you have a navigation bar with several items that should be evenly spaced across the full width of the screen, but each item should only take up as much width as its content needs. Which CSS display property would you use, and how would you achieve this layout?
Answer To achieve this layout, I would use
display: flex
on the container element of the navigation bar. Using justify-content: space-between
ensures that the items are evenly spaced across the width. Each item would use display: inline-block
or remain as block-level elements within the flex container to take up only as much space as needed by their content..navbar {
display: flex;
justify-content: space-between;
}
.navbar-item {
display: inline-block; /* or leave as block elements */
}