Flex Layout Tutorial

Flex Layout Syntax Tutorials Classification Programming Technology

Page layout is a key application of CSS.

The traditional solution for layout, based on the box model, depends on the Display property + Position property + Float property. It is very inconvenient for those special layouts, for example, vertical centering is not easy to achieve.

In 2009, a new scheme--flex layout was proposed, which could implement various page layouts in a simple, complete and responsive way. Currently, it has been supported by all browsers, which means that this feature is now safe to use.

The flex layout becomes the preferred solution for future layouts. This article describes the syntax for flex layouts.

The following two articles are mainly referenced below: A complete guides to Flexbox and a Visual guide to CSS3 Flexbox Properties. One, what is the flex layout.

Flex is the abbreviation for flexible box, meaning "resilient layout", which provides maximum flexibility for box-shaped models.

Any container can be specified as a flex layout.

. box{
  Display:flex;
}

Inline elements can also use the flex layout.

. box{
  Display:inline-flex;
}

WebKit the kernel browser, you must add the-webkit prefix.

. box{
  Display:-webkit-flex; */Safari */
  Display:flex;
}

Note that when set to flex layout, the float, clear, and vertical-align properties of the child elements are invalidated. Ii. Basic Concepts

Elements that use flex layouts, called Flex container, are referred to as "containers." All of its child elements automatically become container members, known as Flex items (Flex Item), or "project" for short.

The container has two axes by default: the horizontal spindle (main axis) and the vertical intersection axis (cross axis). The starting position of the spindle (the intersection with the border) is called main start, the end position is called the main end, the start position of the crossing axis is called Cross start, and the end position is called Cross end.

The project is arranged by default along the spindle. The main axis space occupied by a single item is called the main size, and the occupied intersection space is called cross size. third, the container properties

The following 6 properties are set on a container. Flex-direction flex-wrap flex-flow justify-content align-items align-content 3.1 flex-direction Properties

The Flex-direction property determines the direction of the spindle (that is, the direction in which the item is arranged).

. box {
  Flex-direction:row | row-reverse | column | column-reverse;
}

It may have a value of 4. Row (default): The spindle is horizontal and the starting point is on the left side. Row-reverse: The spindle is in the horizontal direction, starting at the right end. Column: The spindle is in the vertical direction, starting at the top edge. Column-reverse: The spindle is in the vertical direction, starting at the bottom edge. 3.2 Flex-wrap Properties

By default, items are lined up in a line (also known as the "axis"). The Flex-wrap property defines how to wrap a line if one of the axes does not fit.

. box{
  Flex-wrap:nowrap | wrap | wrap-reverse;
}

It may take three values.

(1) nowrap (default): No Line break.

(2) Wrap: Wrap, the first line is above.

(3) Wrap-reverse: line break, the first line is below.

3.3 Flex-flow

The Flex-flow property is a shorthand for the Flex-direction property and Flex-wrap property, and the default value is row nowrap.

. box {
  flex-flow: <flex-direction> | | <flex-wrap>;
}

3.4 justify-content Properties

The Justify-content property defines how the item is aligned on the spindle.

. box {
  Justify-content:flex-start | flex-end | center | space-between | space-around;
}

It may take 5 values, and the exact alignment is related to the direction of the axis. The following assumes that the spindle is from left to right. Flex-start (default): Left-justified flex-end: right-aligned center: centered Space-between: Justified, the interval between items is equal. Space-around: The intervals on each side of the item are equal. Therefore, the interval between items is one times larger than the interval between items and borders. 3.5 Align-items Properties

The Align-items property defines how the item is aligned on the intersection axis.

. box {
  Align-items:flex-start | flex-end | center | baseline | stretch;
}

It may take 5 values. The specific alignment is related to the direction of the cross axis, which assumes that the intersection axis is from top to bottom. Flex-start: The start alignment of the intersection axis. Flex-end: The end alignment of the intersection axis. Center: The midpoint alignment of the intersection axis. Baseline: The baseline alignment of the first line of text for the item. Stretch (default): If the item is not set to height or auto, it fills the height of the entire container. 3.6 Align-content Properties

The Align-content attribute defines the alignment of multiple axes. If the item has only one axis, this property does not work.