| title | date |
|---|---|
Study Notes: Reading CSS Flex Layout Module 1 - Chapter 1~6 |
2019-03-24 |
Original post by tae: Reading CSS Flex Layout Module 1 - Chapter 1~6
In return Flex Layout gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need. It allows authors sematically write HTML code, regarardless of visual presentation.
A flex container is the box generated by an element with a computed display of flex or inline-flex. In-flow children of a flex container are called flex items and are laid out using the flex layout model.
flex layout is biased to the flex directions.
- An illustration of the various directions and sizing terms as applied to a row flex container. this image explains all about flex layout
Name: display New values: flex | inline-flex
flex: This value causes an element to generate a flex container box that is block-level when placed in flow layout.inline-flex: This value causes an element to generate a flex container box that is inline-level when placed in flow layout.
some properties don't apply in the context of flex layout.
floatandcleardo not create floating or clearance of flex item, and do not take it out-of-flow.vertical-alignhas no effect on a flex item.- the
::first-lineand::first-letterpseudo-elements do not apply to flex containers, and flex containers do not contribute a first formatted line or first letter to their ancestors.
Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item.
A code is worth a thousand words.
<div style="display:flex">
<!-- flex item: block child -->
<div id="item1">block</div>
<!-- flex item: floated element; floating is ignored -->
<div id="item2" style="float: left;">float</div>
<!-- flex item: anonymous block box around inline content -->
anonymous item 3
<!-- flex item: inline child -->
<span>
item 4
<!-- flex items do not split around blocks -->
<q style="display: block" id=not-an-item>item 4</q>
item 4
</span>
</div>
As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.
Percentage margins and paddings on flex items, like those on block boxes, are resolved against the inline size of their containing block
Flex items paint exactly the same as inline blocks, except that order-modified document order
and z-index values are behaving exactly as if position were relative.
Specifying visibility:collapse on a flex item causes it to become a collapsed flex item, producing an effect similar to visibility:collapse on a table-row or table-column:
- 'Architecture' is the logest word in
- list. width of element contains this word should be stable even if it hides. that's why this behavior is important.
these 3 suggestions used in this calculation account for the relevant min/max/preferred size properties so that the content-based minimum size does not interfere with any author-provided constraints, and are defined below:
- specified size suggestion
- If the item’s computed main size property is definite, then the specified size suggestion is that size. It is otherwise undefined.
- transferred size suggestion
- If the item has an intrinsic aspect ratio and its computed cross size property is definite, then the transferred size suggestion is that size, converted through the aspect ratio. It is otherwise undefined.
- content size suggestion
- The content size suggestion is the min-content size in the main axis, clamped, if it has an aspect ratio, by any definite min and max cross size properties converted through the aspect ratio, and then further clamped by the max main size property if that is definite.
WARNING : Authors must not use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.
- Name: flex-direction
- Value: row | row-reverse | column | column-reverse The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.
- Name: flex-wrap
- Value: nowrap | wrap | wrap-reverse The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.
- Name: flex-flow
- Value: <‘flex-direction’> || <‘flex-wrap’>
note that flex-flow directions are writing mode sensitive
- Name: order
- Value: Flex items are, by default, displayed and laid out in the same order as they appear in the source document. The order property can be used to change this ordering.
.tabs {
display: flex;
}
.tabs > .current {
order: -1; /* Lower than the default of 0 */
}
The order property does not affect ordering in non-visual media (such as speech). Likewise, order does not affect the default traversal order of sequential navigation modes (such as cycling through links
Flex items in a flex container are laid out and aligned within flex lines, hypothetical containers used for grouping and alignment by the layout algorithm. There's two types of flex lines container
-
A single-line flex container (i.e. one with flex-wrap: nowrap) : it lays out all of its children in a single line, even if that would cause its contents to overflow.
-
A multi-line flex container (i.e. one with flex-wrap: wrap or flex-wrap: wrap-reverse) : it breaks its flex items across multiple lines, similar to how text is broken onto a new line when it gets too wide to fit on the existing line. When additional lines are created, they are stacked in the flex container along the cross axis according to the flex-wrap property. Every line contains at least one flex item, unless the flex container itself is completely empty.
