A few days ago I read the Flexbox spec and I found several things that surprised me. And I'd like to tell about it in this post.
📌 The display value of a flex item is blockified. So if the element has the inline, inline-block, inline-flex or inline-grid value then it computes as block equivalent.
📌 In the case of flex items with display: table, the table wrapper box becomes the flex item, and the order and align-self properties apply to it.
📌 We can use the justify-content, align-items and align-self properties for flex items which has the position property is absolute.
📌 But if we use the stretch value then it is treated the same as flex-start.
📌 If absolutely-positioned flex item has values top, right, bottom and left then they have priority.
📌 The margins of adjacent flex items do not collapse.
📌 Percentage margins and paddings on flex items, like those on block boxes, are resolved against the inline size of their containing block, e.g. left/right/top/bottom percentages all resolve against their containing block’s width in horizontal writing modes.
📌 Auto margins expand to absorb all available space in the horizontal and vertical axis.
📌 Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static (behaving exactly as if position were relative).