Auto value in CSS

many CSS properties support auto value, but the effect varies from property to property. Some are hard to understand. in this post, I introduce the box Model property, flex and more.

Box property

Horizontal Rule

for black element, CSS prefers child occupy all available space of parent. this is mean margin left + border-left + width + border right + margin-right = parent content width . what happent if child box is less then parent content with? the key is auto value. browse use auto to fill those space.

width

By default, width is auto. so in order to take all spaces the block element is as wider as possible

margin

if the left and right margin is auto, the margin occupies remained spaced evenly; the item is centered. If one left or right margin is auto, only one margin occupies space will push the item to the right or left side. A trick to align element right is that set margin-left to auto.
code

flex

flex-basis

flex-basis set the basic width or height size of the flex item, whichever is in the main dimension. It's a value before flex-grow and flex-shrink. the rule of auto is that

if the flex item has width or height, whichever is in main dimension, set flex-basis to that value.
if width or height is auto, set to content width
this min width of flex-basis is min-content, even if you set a value to 0px. it can't be shorter
after taking calculate flex-basis, only extra space divide base on grow or shrink

make three columns evenly

flex: 1 0 0: flex-basis set to 0 mean all the space is available, then space will be distributed evenly between all of them. or

flex: 0 0 33.3% set basic width to 1/3 disable grow and shrink. or

flex: 0.3333 0 0 flex grow less than one will take up less than 100% of the free space. Here each item takes 33.33% free space.

stacking context

z-index

everyone knows position elements with z-index can change stacking order which lets element displays on top of others. but what is the order of z-index: auto? I find it on the document

auto: The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.

and this

For those with 'z-index: auto', treat the element as if it created a new stacking context, so the behave of z-index: auto and z-index: 0 is basically the same. the stacking level order is same, not create stacking context but as if creating. we can think of positioned element with z-index: auto is an element cteating stacking contexts and no z-index order, just like opacity: 0.99

paint order

children within a stacking context are painted to the screen from back-to-front as follows:

Child stacking contexts with a negative stack level (for example, positioned and z-index: -1)
Non-positioned block elements (A block box that overlaps with a float has its borders and background rendered “behind” the float, whereas its content is rendered “on top” of the float.)
Floating descendants and their contents
Non-positioned inline elements(z-index and position properties aren't involved)
Child stacking contexts with a stack level of 0 (for example, positioned and 'z-index: auto' or 'z-index: 0', opacity less than 1, or transform other than none)
Child stacking contexts with positive stack levels (for example, positioned and z-index: 1) If two elements have the same stack level, they’ll be layered according to their order in the source HTML.

example

todo