What is Flexbox?

What problem is it mainly meant to solve?

1. Efficient and flexible layout and alignment. Before Flexbox appeared, page layouts were usually implemented using floats or absolute and relative positioning. There were not many layout methods, but they were barely usable. However, later on, with the rapid development of front-end technology and the rapid iteration of page layout requirements, traditional layout methods appeared insufficiently expressive in the face of increasingly cool and sophisticated design mockups, and layouts became troublesome and inflexible. This was especially true for element alignment, which often required considerable effort and various tricks to achieve. The emergence of Flexbox as a layout method can be seen as an attempt to solve the problem of layout and alignment.
2. Solving the difficulty of page layout on mobile devices. Today there are more and more smart devices, and more and more device sizes. Obviously, developers cannot provide a solution for every screen size; they can only provide a general solution to adapt to all kinds of devices. Furthermore, most smart devices today support screen rotation. Screen rotation affects page layout to a certain extent. This problem is also beyond the power of traditional layout methods, or rather, so far there is still no very elegant solution to this problem, until the emergence of Flexbox.

How to use Flexbox

<div class="flexbox-parent">
	<div class="flexbox-children child-1">1</div>
	<div class="flexbox-children child-2">2</div>
	<div class="flexbox-children child-3">3</div>
</div>

.flexbox-parent {
    border: 1px solid #ccc;
    display: flex;
    width: 300px;
    margin: 20px auto;
}
.flexbox-children {
    background: #f5f7f8;
    line-height: 50px;
    height: 50px;
    text-align: center;
    border: 1px solid #eee;
}
.child-1 {
    width: 50px;
}
.child-2 {
    width: 80px;
}
.child-3 {
    width: 100px;
}

For flexbox-parent

display

.flexbox-parent {
	display: flex; /* or inline-flex */
}

flex-direction

.flexbox-parent {
	flex-direction: row（default value） | row-reverse | column | column-reverse;
}

flex-wrap

.flexbox-parent {
	flex-wrap: nowrap (defalut value) | wrap | wrap-reverse;
}

.flexbox-parent {
	flex-flow: <flex-direction>  <flex-wrap>;
}

justify-content

.flexbox-parent {
	justify-content: flex-start （default value） | flex-end | center | space-between | space-around;
}

• flex-start
  The first child element of the Flexbox will be flush against the left side of the parent element, and the following child elements will follow immediately to the right. When the total width of all child elements is less than the width of the parent element, blank space will be produced on the far right. This is the default behavior.
• flex-end
  and flex-start is the opposite: the last child element is flush against the right side of the parent element, and the preceding child elements follow immediately to the left.
• center
  Neither the first child element nor the last child element is flush against the two sides of the parent element; instead, all child elements are placed close together and centered horizontally, leaving blank space on both sides.
• space-between
  is flex-start and flex-end is a fusion of the two, but not entirely a fusion of them. In this mode, the first child element is flush against the left side of the parent element, the last child element is flush against the right side of the parent element, and the gaps between the middle child elements are equal. space-around
• space-around
  and space-between is similar, except that the first element and the last element are not flush against the two sides of the parent element; instead, the gaps on both sides are equal. align-items

align-items

.flexbox-parent {
	align-items: flex-start | flex-end | center | stretch (default value) | baseline;
}

• flex-start
  will align the child elements vertically to the top of the parent element.
• flex-end
  is the opposite: the child elements are aligned vertically to the bottom of the parent element.
• center
  as the name suggests, centers them vertically.
• stretch
  makes the height of the child elements equal to the height of the parent element. This is the default display mode.
• baseline
  aligns vertically based on the text baseline within the child elements.

align-content

.flexbox-parent {
	align-content: flex-start | flex-end | center | stretch (default value) | space-between | space-around;
}

For flexbox-children

order

.flexbox-children {
	order: <interger>;
}

flex-grow

.flexbox-children {
	flex-grow: <number>; /* default 0 */}

flex-shrink

.flexbox-children {
	flex-shrink: <number>; /* default 1 */}

flex-basis

.flexbox-children {
	flex: none |  [ <flex-grow> <flex-shrink> ? || <flex-basis>]
}

align-self

.flexbox-children {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Things to note

Use cases

Perfect centering

.flexbox-parent {
    display: flex;
    height: 300px;
    align-items: center;
    justify-content: center;
}
.flexbox-children {
    width: 100px;
    height: 100px;
}

Adaptive two-column layout

.flex-27 {
    height: 300px;
    width: 60%;
}
.flex-27 .left {
    width: 100px;
    height:100%
}
.flex-27 .right {
    flex-grow: 1;
    height:100%;
    background: none;
}

Navigation bar with a button on the right

.flex-28 {
    border-radius: 3px;
    padding:10px 5px;
}
.flex-28 a {
    padding: 0 10px;
}
.flex-28 .left {
    flex-grow: 1
}

Bugs currently present in Flexbox implementations across browsers

Browser compatibility

• (new) The latest version, whose syntax is the one mentioned above: display: flex
• (tweener) The unofficial syntax that appeared starting in 2011:display: flexbox
• (old) The syntax that appeared starting in 2009: display: box

Reference

• A Complete Guide to Flexbox