Flexbox Specifications and Flexible Box Layout

Flexbox consists of a Flex container (parent element) and Flex items (child elements).
By applying display:flex to the parent element, it becomes a flex container, and its child elements become flex items.

Officially called the Flexible Box Layout Module, Flexbox is a new CSS layout mode designed to make box layouts flexible.
The concept of Flexbox itself has been drafted since 2009, initially as display:box and later as display:flexbox. However, the specifications changed frequently, making it less user-friendly and practical at the time.

Recently, the specification has stabilized in the form of display:flex, which is now supported by modern browsers and already utilized in major products for grid layouts, navigation, and more.

As mentioned above, the current specification for Flexbox is display:flex.
It is already supported in the latest versions of modern browsers, including Chrome, Safari, and IE11, eliminating the need for vendor prefixes for these versions.
To support older versions, you will need to write vendor prefixes or properties tailored to the box/flexbox specifications, such as display:box for stock browsers on Android OS 4.3 and below, and display:flexbox for IE10.

For IE8 and IE9 support, a script called flexibility.js is available.
For more details on this, please refer to the reference site below.
flexibility.js is incredibly useful for making Flexbox compatible with IE8 and 9!

Below, we introduce the basic Flexbox properties, based on code that utilizes display:flex.

.flex-container{
display: flex;
}

Support for older versions

.flex-container{
display: -ms-flexbox; /* IE10 */
display: -webkit-box; /* Android 4.3 and below, Safari 3.1〜6.0 */
display: -webkit-flex; /* Safari 6.1 and later */
}

.flex-container{
display: flex;
flex-direction: column-reverse;
}

Support for older versions

.flex-container{
-ms-flex-direction: column-reverse; /* IE10 */
-webkit-box-direction: reverse; /* Android 4.3 and below, Safari 3.1〜6.0 */
-webkit-flex-direction: column-reverse; /* Safari 6.1 and later */
}

.flex-container{
display: flex;
justify-content: space-between;
}

Support for older versions

.flex-container{
-ms-flex-pack: justify; /* IE10 */
-webkit-box-pack: justify; /* Android 4.3 and below, Safari 3.1〜6.0 */
-webkit-justify-content: space-between; /* Safari 6.1 and later */
}

.flex-container{
display: flex;
flex-wrap: wrap;
}

Support for older versions
*Omitted as there are no corresponding properties for stock browsers on Android OS 4.3 and below, or Safari 6.0 and earlier.

.flex-container{
-ms-flex-wrap: wrap; /* IE10 */
-webkit-flex-wrap: wrap; /* Safari 6.1 and later */
}

.flex-container{
display: flex;
flex-wrap: wrap;
align-items: center;
}

Support for older versions

.flex-container{
-ms-flex-align: center; /* IE10 */
-webkit-box-align: center; /* Android 4.3 and below, Safari 3.1〜6.0 */
-webkit-align-items: center; /* Safari 6.1 and later */
}

.flex-container{
display: flex;
flex-wrap: wrap;
align-content: center;
}

Support for older versions
*Omitted as there are no corresponding properties for stock browsers on Android OS 4.3 and below, or Safari 6.0 and earlier.

.flex-container{
-ms-flex-line-pack: center; /* IE10 */
-webkit-align-content: center; /* Safari 6.1 and later */
}

.flex-container{
display: flex;
flex-flow: row-reverse wrap;
}

Support for older versions
*Omitted as there are no corresponding properties for stock browsers on Android OS 4.3 and below, or Safari 6.0 and earlier.

.flex-container{
-ms-flex-flow: row-reverse wrap; /* IE10 */
-webkit-flow: row-reverse wrap; /* Safari 6.1 and later */
}

.flex-container{ display: flex;}
.item1{ order: 2;}
.item2{ order: 3;}
.item3{ order: 1;}

Support for older versions

.item1{
-ms-flex-order: 2; /* IE10 */
-webkit-box-ordinal-group: 2; /* Android 4.3 and below, Safari 3.1〜6.0 */
-webkit-order: 2; /* Safari 6.1 and later */
}

.flex-container{ display: flex;}
.item1{ align-self: flex-end;}
.item2{ align-self: stretch;}
.item3{ align-self: flex-start;}

Support for older versions
*Omitted as there are no corresponding properties for stock browsers on Android OS 4.3 and below, or Safari 6.0 and earlier.

.item1{
-ms-flex-item-align: end; /* IE10 */
-webkit-align-self: flex-end; /* Safari 6.1 and later */
}

.flex-container{ display: flex;}
.item1{ flex: 1;}
.item2{ flex: 2;}
.item3{ flex: 3;}

Support for older versions

.item1{
-ms-flex: 1; /* IE10 */
-webkit-box-flex: 1; /* Android 4.3 and below, Safari 3.1〜6.0 */
-webkit-flex: 1; /* Safari 6.1 and later */
}

What did you think of this overview?
You can see that layouts that used to cause so much trouble can now be easily implemented in a stable manner using Flexbox.
In this article, we briefly introduced the primary properties along with the current specifications. However, there are many other properties and workflows available, and CSS coding utilizing Flexbox is bound to become the standard.
While it will likely take me some more time to fully master it, I look forward to actively implementing Flexbox to improve task efficiency.