Friday 23 August 2019

css - How can we calculate "flex-basis: auto & min-width" and "width at cross axis"?

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

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...