In this section, the target

  1. The first setting for mastering elastic layout display is set to Flex.
  2. Learn how the display of internal elements changes after the container is set to flex layout.

Content in this paper,

This article describes the first step in an elastic layout by setting the container display to Flex and walking through the process step by step.

Read for 10 to 15 minutes.

Set the container display to flex

We know that display is used to set the display properties of tag elements, including None, block, and so on.

You can define the container using flex layout by setting the label element display to flex, and the items under the container will automatically switch to flex layout.

Example 1, given that the parent div element is 450 wide and 300 high, set it to flex elastic layout. The example is divided into three steps.

**1) ** Given the following HTML structure, one div (container) contains three div (items) :

<div class="container">
	<div class="item item1">item1</div>
	<div class="item item2">item2</div>
	<div class="item item3">item3</div>
</div>
Copy the code

**2) ** Set related styles to see several divs:

/* Set the width and height of the container, the border, easy to see the appearance */
.container {
	width: 450px;
	height: 300px;
	margin: 8% auto;
	border: 1px solid pink;
}

/* Set the background color of 3 items */
.item1 {
	background-color: skyblue; 
}

.item2 {
	background-color: aliceblue;
}

.item3 {
	background-color: lightblue;
}
Copy the code

Operation effect:

It’s a little bit easier to do here, because we know that div is a block element, and it automatically fills up the line, item1, item2, item3.

In practice, however, we often need to display divs side by side. We used to do this with floats, but now we can use Flex layout.

**3) ** Container set to elastic layout flex:

.container {	
	/* Set the layout of the child elements to flex layout */
	display: flex;
}
Copy the code

The code is as simple as setting the display property to flex on the container.

Operation effect:

To observe the operation effect, we observe that the three items are displayed side by side. Readers who see this effect will probably associate this with a left-right layout.

This completes the key step in setting up flex’s elastic layout.

Complete code:

<style>
	.container {
		width: 450px;
		height: 300px;
		margin: 8% auto;
		border: 1px solid pink;

		/* Set the layout of the child elements to flex layout */
		display: flex;
	}

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

Of course, if you want to achieve more effects, such as the width, arrangement, spacing, etc., you can set it with 6 container properties and 6 item properties.

This section summarizes

To use flex elastic layout, you need to set the display property of the container to Flex for the subsequent properties to take effect.