In this section, the target

  1. Master flex-direction.
  2. Understand the concept of principal axis change.

Content in this paper,

This article describes the container property flex-direction, which sets the direction of the main axis.

Read for about 10 to 15 minutes.

Flex container Properties

The previous properties are all set on the project, and there are six more set on the container:

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content
Copy the code

Item properties can be understood as individual Settings for pairs of items, and container properties can be understood as unified Settings for pairs of items within a container. These properties are explained in the following sections.

The flex – direction

Flex-direction specifies the spindle direction. There are four values:

.container {
	flex-direction: the row (this is the default) | row - reverse | column | column - reverse}Copy the code

Among them:

1. The main axis of the row is horizontal and the starting point is left (this is the default). 2. Row-reverse The main axis is horizontal and the starting point is on the right. 3. The main axis of column is vertical and the starting point is up. 4. Column-reverse The main axis is vertical and the starting point is down.Copy the code

As shown below:

The black arrows in the figure indicate the main axis.

Difficult points:

Setting flex-direction changes the direction of the main axis. Properties such as Flex-basis, Order, and so on will look different depending on the direction of the main axis. But these attributes are rendered along the main axis, so with that in mind, I think it’s OK.

Here’s an example.

In example 1, we implemented the Flex layout in the previous example. By default, items are arranged horizontally, and in this case, items are arranged horizontally in reverse order.

Since they are horizontal and in reverse order, we can set flex-direction to row-reverse on the container. Refer to the following code:

.container {
	/* Set the layout of the child elements to flex layout */
	display: flex;
	/* Set the spindle orientation: the spindle is horizontal and the starting point is right */
	flex-direction: row-reverse
}
Copy the code

Operation effect:

As you can see, the items are arranged horizontally in reverse order. This is not hard to understand, the items are arranged along the main axis.

Think about:

If the order of item 2 is set to -1, what is the order of items?

Answer:

The order of project 1, Project 2 and Project 3 is 0, -1 and 0 respectively. Since the items are sorted from smallest to largest, they should be: Project 2, Project 1 and Project 3.

Because the main axis is in reverse order in horizontal direction, the operation effect is as follows:

Example 2, follow the example and set the items in vertical order.

Set the flex-direction property to Column on the box. Refer to the following code:

.container {
	/* Set the layout of the child elements to flex layout */
	display: flex;
	/* Set the spindle direction: the spindle is vertical, starting at the top */
	flex-direction: column;
}
Copy the code

Operation effect:

Think about:

As mentioned earlier in the presentation of Flex-basis, flex-basis is the space used to set the main axis. If you set flex-basis to 50px, is it equivalent to setting width or height?

Answer:

Because the main axis becomes vertical when flex-direction is set to column, setting flex-basis is equivalent to setting height.

The running effect is as follows:

Example 3, follow the example and set the items in reverse vertical order:

.container {
	/* Set the layout of the child elements to flex layout */
	display: flex;
	/* Set the spindle direction: the spindle is vertical, starting from the lower */
	flex-direction: column-reverse;
}
Copy the code

Operation effect:

This section summarizes

  1. Flex-direction Sets the main axis of the container. There are four values: row (the default), row-reverse, column, and column-reverse.
  2. Key point: Items are arranged along the main axis.
  3. Flex -direction spindle changes are difficult to understand. In practice, the row attribute is used most often. Master the changes with other attributes.