In Flex layout, we know that the Flex-basis property is used to set the initial main size of a Flex project.

Same effect

But in practice, using the Flex-basis and width attributes on Flex projects gives the same results.

Take the following structure for example:

<div style="display: flex;">
	<div class="item">Item 1</div>
	<div class="item">Item 2 is a bit too much</div>
	<div class="item">Item 3</div>
</div>
Copy the code
  1. Equal-width column: in.itemSet up theflex-basis: 0orwidth: 0You can get this effect.
.item {  flex-basis:0; /* The same effect as setting width: 0 */ flex-grow: 1; }Copy the code

  1. The width is fixed on both sides and the remaining space is occupied in the middle.
.item:first-child..item:last-child { flex-basis: 100px; /* The same effect as setting width: 100px */ }
.item:nth-child(2) { flex-grow: 1; }Copy the code

Observation shows that both layouts give the same effect whether you use Flex-basis or Width on a Flex project.

What’s the difference?

In fact, the width is not enough. Why design one more Flex-basis property?

Well, there’s a difference:

Note: For the sake of description, assume that the current document is typeset left to right, top to bottom, in horizontal writing mode.

  • Spindle size: The first thing to be clear is,flex-basisSet the Flex project spindle size whenflex-directionThe valuescolumn 或 column-reverseWhen,flex-basisIt’s notwidth, butheight.
  • Supported abbreviation: PassedflexShorthand properties, we can set bothflex-grow,flex-shrink,flex-basisThese three properties, if usedwidth, had to be set separately.
  • Scope of use:flex-basisOnly inFlexWorks on the project, not yet on the located Flex project.
  • Priority level: When set on a Flex projectflex-basis 和 width/height, the effect will beflex-basis.

Auto and content

The default value for flex-basis is auto, which is only slightly different from the other valuable content.

When flex-basis: auto, the current Flex project is checked to see if the width/height attribute is set. If not, it will revert to Flex-basis: content.

The size of the flex project is no larger than max-width/height and no smaller than min-width/height.

Flex-basis: content equals Flex-basis: auto; width/height: auto; In my opinion, this value does not seem to have any practical significance. It is a bit weak.

To summarize

  • In horizontal writing,flex-basisAnalysis effect andwidthExactly the same (providedflex-basisThe value of theta does not equalauto 或 content).
  • flex-basisOnly true (not absolutely located)The Flex projectTo take effect
  • flex-basisSet up theThe spindle size, according to theflex-directionDifferent values of, may representwidthCan also meanheight
  • flex-basis Support for shorthand propertiesflex
  • flex-basis 与 width/heightWhen used together,Higher priority

Refer to the link

  • The flex – basis, MDN
  • Flex Basis Property in Flexbox
  • What are the differences between flex-basis and width?

(End of text)

Advertising time (long term)

I have a good friend who owns a cattery, and I’m here to promote it for her. Now the cattery is full of Muppets. If you are also a cat lover and have the need, scan her FREE fish QR code. It doesn’t matter if you don’t buy it. You can just look at it.

(after)