To use flexbox to implement a responsive navigation bar, first set .navbar as a flex container, and use justify-content: space-between to achieve spindle alignment; secondly add flex-wrap: wrap to allow navigation items to automatically wrap when there is insufficient space; finally control the spacing between items through the gap attribute. In addition, when building a card layout, 1. Set the parent container to display: flex; 2. Use flex-basis to control the width of the child, such as the three-column layout can be used for calc (33.33% - gap); 3. Dynamically adjust flex-basis to adapt to different screens in combination with media queries. Note when using nested flex containers: 1. Children may be compressed, flex-shrink: 0 or min-width should be set to avoid it; 2. The alignment is easy to interfere, so it is recommended to use align-self to control it separately; 3. Use flex-grow carefully to prevent excessive expansion of elements. Mastering these techniques can effectively achieve a variety of complex layouts.

Flexbox is a very practical tool in CSS layouts, which can greatly reduce the amount of code and increase flexibility when dealing with complex layouts. Although it was originally designed for one-dimensional layouts (such as horizontal or vertical arrangement), in many practical scenarios, the rational use of flexbox can solve many "complex" problems.

How to use flexbox to implement responsive navigation bar

The navigation bar is one of the most common components of a website, usually with multiple links, icons and even drop-down menus. A responsive navigation bar can be easily implemented with flexbox.

• Spindle alignment : display: flex and justify-content: space-between can make navigation items evenly distributed.
• Line wrapping processing : When the screen becomes smaller and there are too many navigation items, you can add flex-wrap: wrap to make them wrap automatically.
• Adaptive spacing : Use gap property to set the spacing between items without additional margin or padding.

 .navbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

If you want certain elements to be closed on the mobile side, you can use media queries to cooperate with hidden logic, but the infrastructure is already flexible enough with flexbox.

Build a card layout with flexbox

Card layout is often used in product display, article list and other scenarios. Traditional practices may require float or inline-block, but flexbox is more concise.

• Container is set to flex : parent container is set to display: flex .
• Adjust the child width : Set the appropriate flex-basis for each card, such as flex-basis: calc(33.33% - gap) to support three-column layout.
• Responsive changes : In combination with media queries, change flex-basis at different screen sizes, such as 100% on mobile phones.

The advantage of this is that the layout will automatically wrap and keep it visually neat.

Note: Nested flex containers are prone to losing control

When you put another flex container inside a flex container, unexpected behavior is prone to occur. for example:

• The child item is suddenly compressed and cannot see what it deserves.
• Alignment interferes with each other.
• Different browsers perform inconsistently.

Solution:

• Clearly set flex-shrink: 0 or min-width of the inner container to prevent it from being compressed by the outer layer.
• Use align-self to control the alignment of individual items, not the entire container.
• Use flex-grow carefully to avoid an element taking up too much space.

It is okay to use flexbox in nested, but you should pay attention to hierarchical relationships and default behavior, otherwise you will easily fall into debugging dilemma.

Basically that's it. Master these common scenarios well, most complex layout requirements can be quickly implemented with flexbox.

The above is the detailed content of Using flexbox for complex css layouts. For more information, please follow other related articles on the PHP Chinese website!