March 26, 2019
A flex ontainer distributes free space to its items to fill the container, or shirinks them to prevent overflow with
'flex-shirk>? || <
flex factors =
flex grow and shrink
Authors are encouraged to control flexibillity using the
flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses
flex-growlonghand and specifies the flex grow factor, which determines how much the flex item will grow reltive to the rest of the flex items in the flex container when positive free space is distributed.
flex-shrinklonghand and specifies the flex shirnk factor which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. small item won’t shirnk to zero before a larger item has been noticeably reduced
<flex-basis> : the inital main size of the flex item, before free space is distributed according to the flex factors.
By default, flex items won’t shrink below their minimum content size. To change this, set the
margin in flex layout is powerful than what margins can do in block layout
align-self, any positive free space is distributed to auto margins in that dimension.
space-aroundIt aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved.
align-items sets the default alignment for all of the flex container’s items, including anonymous flex items.
align-self allows this default alignment to be overridden for individual flex items.
the baselines of a flex container are determined as follows
first/last main-axis baseline set
If any of the flex items on the flex container’s startmost/endmost flex line participate in baseline alignment, the flex container’s first/last main-axis baseline set is generated form te shared alignment baseline fo those flex item.
Otherwise, if the flex container has at least one flex item, the flex container’s first/last main-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item.
Otherwise, the flex container has no first/last main-axis basline set, and one is synthesized if needed according to the rules of its alignment context.
first/last cross-axis baseline set
If the flex container has at least one flex item, the flex container’s first/last cross-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item.
Otherwise, the flex container has no first/last cross-axis baseline set, and one is synthesized if needed according to the rules of its alignment context.