In this section, the target

  1. Master basic usage of align-items.
  2. Master the skill of centralizing algin-items.

Content in this paper,

The align-items container property is used to set the alignment of items on the cross axis. Finally, we introduce a central application for vertical and horizontal alignment.

Read for 5 to 10 minutes.

The align – items

Like precy-content, the align-items property sets the alignment of items along the cross axis. The syntax is as follows:

.container {
	align-items: flex - start | flex - end | center | baseline | stretch (default); }Copy the code

Among them:

1. Flex-start aligns with the starting point along the cross axis (default). 2. Flex -end aligned along the end of the cross axis. 3. Center is centered along the cross axis. 4. Align the baseline along the cross axis according to the text in the project. 5. Automatically stretch to the maximum along the direction of the cross shaft.Copy the code

Let’s look at an example. Since stretch is the default, we’ll start with this example.

Example 1, have a div (container, 450px) containing 3 div (items, flex-basis 50px) and set align-items to stretch:

.container {
	/* Set the layout of the child elements to flex layout */
	display: flex;
	/* Sets the alignment of items on the cross axis */
	align-items: stretch;
}

.item {
	/* Set the project space to 50px */
	flex-basis: 50px;
}
Copy the code

Operation effect:Stretch is the default value, and stretch is the default value.

Example 2, follow up and set align-items to flex-start:

.container {
	/* Sets the alignment of items on the cross axis */
	align-items: flex-start;
}
Copy the code

Operation effect:Start alignment along the starting point of the cross axis.

Example 3, follow up and set align-items to flex-end:

.container {
	/* Sets the alignment of items on the cross axis */
	align-items: flex-end;
}
Copy the code

Operation effect:Start to align along the tail of the cross axis.

Example 4, follow the example and set align-items to center:

.container {
	/* Sets the alignment of items on the cross axis */
	align-items: center;
}
Copy the code

Operation effect:The top and the bottom are equidistant, so that’s what middle means.

Example 5, follow the example and set align-items to baseline:

.container {
	/* Sets the alignment of items on the cross axis */
	align-items: baseline;
}
Copy the code

Operation effect:This looks exactly the same as example 2 setting it to Flex-start, right? What difference does it make?

Baseline is stated as text alignment. We try adding an upper inner margin to Item1:

.item1 {
	padding-top: 10px;
}
Copy the code

Operation effect:The meaning is very clear, is to align with the text.

The align – items application

Align -items are often used to center vertically.

In example 1, I have the following HTML code, div 200px wide and 100px high, please center the text vertically up and down:

<div class="container">hello</div>
Copy the code

Center has always been a problem, left center and left center, up and down center is a bit of a problem.

Flex layout is a quick way to set align-items to center. Use the following code:

.container {
	width: 12.5 rem;
	height: 6.25 rem;
	border: 1px solid pink;
	
	/* Set to flex layout */
	display: flex;
	/* Spindle (horizontal direction) centered */
	justify-content: center;
	/* Cross axis (vertical direction) centered */
	align-items: center;
}
Copy the code

Operation effect:

This section summarizes

  1. The align-items property sets the alignment of items along the cross axis.
  2. Align-items are usually implemented in a vertical center.