Get my e-book focusing on CSS3 and
modern web UI development.
dig into web UI development
Last modified: 27. 6. 2016
Therefore, we cannot apply
properties such as
inline-block to the
parent element or its children. Nor can we apply
vertical-align. To be precise, we can apply these properties, however they
will not have any effect when the website is displayed in a browser with
flexbox support. But it is useful when creating fallbacks for older
In relation to the previous point, margins of adjacent items will not be collapsed, unlike when block elements are used.
Element positioning (
position: absolute|relative|fixed) can be applied
when using flex items, unlike when the
float property is used.
When dealing with flex items, we can apply
visibility: collapse the same
way we would apply it when dealing with the
display: table-row or
table-column properties. An element will then take up space in the DOM,
however, it will not be visible.
The direction of the main axis of a flex container is always based on the
writing-mode. Therefore, if we created a layout of a page in Japanese
using flex box, all values would change their order.
Now let’s dig into the “Reference Guide”. We already know that there are two types of flex elements: a flex container and a flex item. Therefore, we divide the properties according to the element type.