In this section, the target

  1. Grasp the basics of context-content.
  2. Learn how to justify multiple columns of items using context-content alignment.

Content in this paper,

This article describes the container property context-content, which sets the alignment of items along the main axis, demonstrating each property value.

Read for 5 to 10 minutes.

The justify – content

The context-content property is used to set the alignment of items along the main axis. The syntax is as follows:

.container {
	justify-content: flex - start (default) | flex - end | center | space - between | space - around; }Copy the code

Among them:

1. Flex-start aligns the starting point along the main axis (default). 2. Flex -end aligned along the main axis. 3. Align center along the main axis. 4. Space-between is spaced along the main axis, with no spacing between the head and tail. Space is aligned along the main axis, with space between the head and tail.Copy the code

Let’s illustrate it by example. It’s easy to understand if you have a picture.

Example 1, with a div (container, 450px) containing three div (project, flex-basis 50px), set context-content to flex-start:

.container {
	/* Set the layout of the child elements to flex layout */
	display: flex;
	/* Set the alignment of the project axis */
	justify-content: flex-start;
}

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

Operation effect:This is also true if you do not set context-content, because context-content is flex-start by default.

Example 2, follow up and set context-content to flex-end:

.container {
	/* Set the alignment of the project axis */
	justify-content: flex-end;
}
Copy the code

Operation effect:The project side is on the right side, but the projects are still sorted as follows: Project 1, project 2, project 3.

Example 3, following the example, sets context-content to center:

.container {
	/* Set the alignment of the project axis */
	justify-content: center;
}
Copy the code

Operation effect:The distance between the left and the right is the same, so this is centered.

Example 4, following the example, set context-content to space-between:

.container {
	/* Set the alignment of the project axis */
	justify-content: space-between;
}
Copy the code

Operation effect:The spacing between items is the same, that’s what it means.

Example 5, following the example, sets context-content to space-around:

.container {
	/* Set the alignment of the project axis */
	justify-content: space-around;
}
Copy the code

Operation effect:It means that each project is the same size plus the space around it.

Think about:

If, in the example above, we set the project’s Flex-basis to 50%, would you be able to tell the difference?

Answer:

Since flex-basis is set to 50%, three items are 150%, which is over the container width.

There is no space left, so justity-content is set to the same value in theory.

The actual running effect is as follows:

The justify – content application

Example 1We often see layouts like this on websites:The difficulty is that the item on the right is most to the right, so you need to calculate the distance between the two items and set it by margin.

If the size of the outer container is not fixed, it is difficult to calculate, and flex layout is convenient.

Here to simulate the layout of the project, the middle of the picture, text and other content is not specific to write.

1) There is a div (container, 98% width, left and right center aligned), and the container contains six div (items, each with a background color) code as follows:

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.container {
		width: 98%;
		margin: 0 auto;
	}

	.item1 {
		background-color: skyblue;
	}

	.item2 {
		background-color: aliceblue;
	}

	.item3 {
		background-color: lightblue;
	}

	.item4 {
		background-color: cadetblue;
	}

	.item5 {
		background-color: powderblue;
	}

	.item6 {
		background-color: skyblue
	}
</style>
<div class="container">
	<div class="item item1">item1</div>
	<div class="item item2">item2</div>
	<div class="item item3">item3</div>
	<div class="item item4">item4</div>
	<div class="item item5">item5</div>
	<div class="item item6">item6</div>
</div>
Copy the code

Operation effect:Div is a block element, so it fills a line. Then use flex elastic layout to handle it.

2) Set the container to Flex layout, wrap the project, and make the project 49% wide:

.container {
	/* Set the layout of the child elements to flex layout */
	display: flex;
	/* Sets the item to wrap */
	flex-wrap: wrap;
}

.item {
	/* Set the item to take up spindle space */
	flex-basis: 49%;
}
Copy the code

This code is not difficult to understand, because each line is two, each width is at most 50%, considering the spacing, so set the project width to 49%.

The running effect is as follows:You can set context-content to space-between.

3) Set context-content to space-between:

.container {
	/* Set item spacing alignment */
	justify-content: space-between;
}
Copy the code

Operation effect:This is perfect for layout, and looks pretty much the same for different phone sizes:

This section summarizes

  1. The context-content property is used to set the alignment of items along the main axis.
  2. Multiple column alignment is a good solution to this problem with the context-content attribute.