I want to know how flex-basis: auto & min-width: 0
and width: auto
is calculated (width
is not set for parent element and flex item) . Therefore, I confirmed the specification of W3C. Is my understanding below correct?
flex-basis: auto
(There is no width definition for the parent element, min-width: 0
is set)
I will read this part (7.1. The flex Shorthand). Then I found that flex-basis: content
is used whenflex-basis: auto
. The computed value of flex-basis: content
seems to be described in the chapter 9. Flex Layout Algorithm.
auto
When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis. If that value is itself auto, then the used value is content.
content
Indicates an automatic size based on the flex item’s content. (It is typically equivalent to the max-content size, but with adjustments to handle aspect ratios, intrinsic sizing constraints, and orthogonal flows; see details in §9 Flex Layout Algorithm.)
I have read that chapter 9. Then I knew that the clause related to flex-basis
was 9.2.3-C Line Length Determination.
If the used flex basis is content or depends on its available space, and the flex container is being sized under a min-content or max-content constraint (e.g. when performing automatic table layout [CSS21]), size the item under that constraint. The flex base size is the item’s resulting main size.
.container {
display: flex;
border: 3px solid green;
overflow-wrap: break-word;
}
.box1 {
flex-basis: content;
/* `flex-basis: auto` works the same way */
border: 3px solid red;
}
flex-basis: content texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
However, since I set min-width: 0
, the size of the flex item is determined based on 9.2.3-D.
Otherwise, if the used flex basis is content or depends on its available space, the available main size is infinite, and the flex item’s inline axis is parallel to the main axis, lay the item out using the rules for a box in an orthogonal flow [CSS3-WRITING-MODES]. The flex base size is the item’s max-content main size.
.container {
display: flex;
border: 3px solid green;
overflow-wrap: break-word;
}
.box1 {
flex-basis: content;
/* `flex-basis: auto` works the same way */
border: 3px solid red;
min-width: 0;
}
flex-basis: content texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
Question 1. Does this flex item's main size
(max-content
) calculation take account of newlines inword-wrap
?
width: auto
( at cross axis, align-items
isn't set stretch
)
The calculated value of width
in the cross axis ( flex-direction: column
) seems to be written in 9.4.11. Cross Size Determination.
Determine the used cross size of each flex item. If a flex item has align-self: stretch, its computed cross size property is auto, and neither of its cross-axis margins are auto, the used outer cross size is the used cross size of its flex line, clamped according to the item’s used min and max cross sizes. Otherwise, the used cross size is the item’s hypothetical cross size.
"hypothetical cross size" is explained in 9.4.7. Cross Size Determination.
Determine the hypothetical cross size of each item by performing layout with the used main size and the available space, treating auto as fit-content.
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
/* Set a value other than `align-items: stretch` */
border: 3px solid green;
overflow-wrap: break-word;
}
.box1 {
border: 3px solid red;
}
align-items: flex-start texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
Question 2. Does this flex item's cross size
(fit-content
) calculation take account of newlines inword-wrap
?
No comments:
Post a Comment