Flex: 1 flex: Auto flex: None Flex: 0 When will it be used?

We often use the Flex abbreviation when we use flex layout on a daily basis. The Flex shorthand sets how an item can grow or shrink to fit the space available in the container. The Flex shorthand property has three values defined below. The default is 0, 1 auto;

  • Flex-grow: Defines the scale of the project. Default is0
  • Flex-shrink: Defines the size of a project. Default1
  • Flex-basis: defines the amount of principal axis space a project occupies before allocating extra spaceauto(Original size of item)

Now that we know the basic flex values, we’ll experiment with some use cases (unless otherwise specified, the use case code will look like this)

  <div class="wrapper ">
    <item class="inner">Eleven eleven eleven eleven eleven</item>
    <item class="inner">.</item>
    <item class="inner">Three three</item>
    <item class="inner">Four four four four four four four four four four</item>
  </div>
Copy the code

flex:1

flex:1 = flex: 1 1 0%;

Flex :1 minimizes content size preferentially when the parent element size is insufficient.

Now let’s style our use case and see what this means

.wrapper{
    margin: 0 auto;
    width: 560px;
    height: 40px;
    border: black 1px solid;
    display: flex;
  }
  .wrapper > .inner{
    border: chartreuse 1px solid;
    flex:1;
  }
Copy the code

As you can see from the example, Flex :1 will sacrifice itself to fill in the parent container’s size if it allocates enough container sizes

Usage scenarios

This is used when we want the element to make the best use of the remaining space without taking up too much of the space of other sibling elements.

  • Uniform layout
  • List of equal proportions

flex:auto

flex:auto = flex: 1 1 auto;

Flex: Auto maximizes content size first when the parent element size is insufficient.

.wrapper{
    margin: 0 auto;
    width: 560px;
    height: 40px;
    border: black 1px solid;
    display: flex;
  }
  .wrapper > .inner{
    border: chartreuse 1px solid;
    flex:auto;
  }
Copy the code

As you can see from the example, Flex: Auto, with sufficient container size allocation, will preferentially expand itself to fill in the parent container’s size

Usage scenarios

This is used when we want elements to make full use of the remaining space, and each element is allocated according to its own content

  • Content dynamically ADAPTS to layout
  • Adaptive layout
  • When the number of child elements is uncertain

flex:0

flex:0 = flex: 0 1 0%;

Flex :0: Usually shows the content minimized width

  .wrapper{
    margin: 0 auto;
    width: 560px;
    height: 40px;
    border: black 1px solid;
    display: flex;
    
  }
  .wrapper > .inner{
    border: chartreuse 1px solid;
    flex:0;
  }
Copy the code

As you can see from the example above: Flex :0 minimizes the content width of the element and does not allocate the container size adequately.

Usage scenarios

When you want the element item to occupy a minimal content width

flex:none

flex:none = flex:0 0 auto;

flex:none; The size of the element is determined by the content, but flex-grow and flex-shrink are both 0. The element is inelastic and is usually shown to maximize the width of the content

  .wrapper{
    margin: 0 auto;
    width: 560px;
    height: 40px;
    border: black 1px solid;
    display: flex;
    
  }
  .wrapper > .inner{
    border: chartreuse 1px solid;
    flex:none;
  }
Copy the code

As you can see from the example above: Flex: None overflows the container directly, with no line breaks, as the maximum content width

Usage Scenarios:

The width of the element is the width of the content, and the content is never newline

  • Button text does not wrap

conclusion

  • Flex :1 vs. flex:auto The difference between flex:1 and flex:auto is whether the child expands (auto) its own size or decreases (1) its own size when the parent element is fully allocated
  • Flex :0 vs. flex: None The difference between maximizing the content width (None) and minimizing the content width (0) without specifying the parent element width
  • We should use different Flex for different usage scenarios. For example, Flex: 1 is used for equal layout, Flex: Auto is used for dynamic content adaptation, and Flex: None is used for element content maximization

Reference:

Flex layout syntax

Zhang Xinxu blog

Tips:

Enter the front end door, the front end of a cabbage, just record their learning road, hope to inspire themselves, but also can share with you, there are wrong places welcome to correct The Olympic!