A Complete Guide to Flexbox

The flex property is a sub-property of the Flexible Box Layout module.

The flex property is a shorthand for setting:

flex-grow
flex-shrink
flex-basis

The second and third parameters (flex-shrink and flex-basis) are optional.

The flex: 1 rule is supposed to compute to this:

flex-grow: 1
flex-shrink: 1
flex-basis: 0
  • flex-grow (default:0)，就是索取父容器的剩余空间，默认值是0，就是三个子容器都不索取剩余空间。
  • flex-basis (default:auto) 这个属性值的作用也就是width的替代品. 如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高。

https://css-tricks.com/flex-grow-is-weird/ https://css-tricks.com/almanac/properties/f/flex-grow/ https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow https://zhoon.github.io/css3/2014/08/23/flex.html