Setting flex: 1 1 0 What is the difference between setting flex-basis and not setting flex-basis?

Understand the Flex layout in depth: flex: 1 1 0 and flex-basis not set

In Flex layout, flex attribute is crucial to the arrangement and size control of child elements. This article will explore in-depth the difference between flex: 1 1 0 and flex-basis not set.

The flex attribute is the abbreviation of flex-grow , flex-shrink and flex-basis :

• flex-grow : Defines the project magnification scale. The larger the value, the greater the proportion of space obtained when allocating the remaining space.
• flex-shrink : Define the project to reduce the scale. The larger the value, the greater the reduction when there is insufficient space.
• flex-basis : Defines the initial size of the project before allocating remaining space.

flex: 1 1 0 Set flex-grow , flex-shrink and flex-basis to 1, 1 and 0, respectively. This means:

• The project will participate in the allocation of remaining space, with a ratio of 1.
• The project will be reduced as needed, with a reduction ratio of 1.
• The initial size of the item is 0.

If flex-basis is not set, the default value is auto , which means that the item automatically calculates the initial size according to its content size.

Let's compare it with the sample code:

<div class="container">
  <div class="image"></div>
  <div class="text">
    <p>This is a longer text paragraph to demonstrate the impact of flex-basis.</p>
  </div>
</div>

.container {
  display: flex;
}

.image {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  margin-right: 20px;
}

.text {
  /*flex: 1 1 0;*/ /* Compare this line comment or uncomment*/
}

Comparative analysis:

1. flex: 1 1 0 : The initial size of .text element is 0. It will take up all the remaining space. The width of the .image element remains unchanged (200px).

2. flex-basis is not set (default auto ) : The initial size of the .text element is determined by its content. Because of the longer text, the .text element will occupy a large space, which may cause .image element to be compressed to fit the container width.

in conclusion:

flex: 1 1 0 and flex-basis not set are completely different. The former ensures that the project does not occupy any space before allocating remaining space, while the latter adapts to the size according to the content. Which one to choose depends on the specific layout requirements. If one project needs to fill the remaining space completely and make sure the other projects are not sized, then flex: 1 1 0 is the best choice. If the project needs to adapt to the size of the content and participate in the allocation of remaining space, you should use flex-basis: auto or other specific values.

The above is the detailed content of Setting flex: 1 1 0 What is the difference between setting flex-basis and not setting flex-basis?. For more information, please follow other related articles on the PHP Chinese website!