Figure out the Flex CSS 3 layout | August more challenges

This is the 19th day of my participation in the August More Text Challenge

In the traditional layout, we often use positioning position, margin, float and so on to achieve the layout of the page, although the function can be achieved without problems, but it has the disadvantage of not flexible enough, it is more laborious to use. For example, if I want to center multiple elements of the same class horizontally and vertically in the parent container, float cannot do this. I can do this by position, but when I set position:absolute, the elements that are set will overlap each other because they are removed from the document flow. Each element has its exact position. You have to calculate where each element should be, and that’s not good, because it’s a lot of work, and then you have to recalculate if the parent adds or deletes some child elements, and that’s a lot of work.

<head> <style type="text/css"> .wraper{ width: 400px; height: 250px; background-color: pink; margin: 150px auto; overflow: hidden; position: relative; } .wraper *{ box-sizing: border-box; background-color: deeppink; border:1px solid #0e0; width: 80px; height: 80px; text-align: center; line-height: 80px; float: left; position: absolute; } /* Set the position */. Wraper div:nth-of-type(1){left: 80px; top: 85px; } .wraper div:nth-of-type(2){ left: 160px; top: 85px; } .wraper div:nth-of-type(3){ left: 240px; top: 85px; } </style> </head> <body> <div class="wraper"> <div>1</div> <div>2</div> <div>3</div> </div> </body>Copy the code

You can also add an extra parent to the element you want to center, via margin

<head>
	<style type="text/css">
		.wraper {
			width: 400px;
			height: 250px;
			background-color: pink;
			margin: 150px auto;
			overflow: hidden;
		}

		.wraper section * {
			box-sizing: border-box;
			background-color: deeppink;
			border: 1px solid #0e0;
			width: 80px;
			height: 80px;
			text-align: center;
			line-height: 80px;
			float: left;
		}
		.wraper section{
			margin:0 auto;
			width: 240px;
			height: 80px;
			margin-top:75px;
		}
		.clearFloat::after{
			clear: both;
			content: "";
			display: block;
		}
	</style>
</head>
<body>
	<div class="wraper">
		<section class="clearFloat">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</section>
	</div>
</body>
Copy the code

The effect is exactly the same as above, this is done by setting margin:0 auto horizontal center for the parent, and adjusting margin-top to make it horizontal center. But this is also troublesome, one has to clean up the impact of floating, two added parent has to calculate the width and height, and three is the worst of the HTML structure for style.

Because of these problems, the Flex layout method was added when CSS2 was upgraded to CSS3. This method is also called elastic layout, Flex layout. Take a look

Because there are so many attributes, I’ve divided it into two categories: parent container and child item

Before I talk about it, I want to pave the way to a knowledge point, that is the main axis and side axis

CSS3 introduces the concept of axial direction, including the main axis and side axis. It’s a little bit different from the way we talk about the horizontal X axis and the vertical Y axis, where the axis can change, and the main axis and the side axis don’t necessarily correspond to the horizontal or vertical direction.

In flex layout, the axis of the container is set by the attributes in the Flex container. The starting and ending points of the axis correspond to Flex-start and flex-end respectively. The alignment and arrangement of child items are based on the specified axis. By default, the main axis is horizontal, starting on the left and ending on the right; The side axis is the vertical direction, starting at the top and ending at the bottom

Use display: flex to activate the Flex feature of an element. Note that it applies only to first-layer elements in the container, not to grandchildren outside the container or inside the container.

Let’s start with the properties and their values used in Flex layout

The first are the attributes on the parent container

1. flex-direction

Flex-direction Indicates the main axis direction. The corresponding values are row, row-reverse, column, and column-reverse, indicating horizontal, horizontal, vertical, and vertical flip respectively

<head> <style type="text/css"> body>div{ float: left; } .wrapper { width: 280px; height: 280px; background-color: rgb(247, 176, 188); margin: 10px; overflow: hidden; display: flex; } .wrapper div{ box-sizing: border-box; background-color: rgb(255, 40, 154); width: 60px; height: 60px; text-align: center; line-height: 60px; } .wrapper div:nth-of-type(2n){ background-color: rgb(167, 82, 127); } .wrapper.one{ flex-direction: row; } .wrapper.two{ flex-direction: row-reverse; } .wrapper.three{ flex-direction: column; } .wrapper.four{ flex-direction: column-reverse; } </style> </head> <body> <div class="wrapper one"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="wrapper two"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div class="wrapper three"> <div>1</div>  <div>2</div> <div>3</div> <div>4</div> </div> <div class="wrapper four"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body>Copy the code

2. flex-wrap

Flex-wrap is used to control whether the child items are displayed on a new line when they are arranged beyond the boundary. The value can be nowrap, wrap, or wrap-reverse, indicating no line feed, line feed, or reverse line feed, respectively

<head>
	<style type="text/css">
		body>div{
			float: left;
		}
		.wrapper {
			width: 280px;
			height: 180px;
			background-color: rgb(247, 176, 188);
			margin: 10px;
			overflow: hidden;
			display: flex;
		}
		.wrapper div{
			box-sizing: border-box;
			background-color: rgb(255, 40, 154);
			width: 60px;
			height: 60px;
			text-align: center;
			line-height: 60px;
		}
		.wrapper div:nth-of-type(2n){
			background-color: rgb(167, 82, 127);
		}
		.wrapper.one{
			flex-wrap: nowrap;
		}
		.wrapper.two{
			flex-wrap: wrap;
		}
		.wrapper.three{
			flex-wrap: wrap-reverse;
		}

	</style>
</head>

<body>
	<div class="wrapper one">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
	</div>
	<div class="wrapper two">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
	</div>
	<div class="wrapper three">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
	</div>
</body>
Copy the code

3. flex-flow

Flex-flow is a flow of documents, a combination of flex-direction and flex-wrap

<head>
	<style type="text/css">
		body>div{
			float: left;
		}
		.wrapper {
			width: 280px;
			height: 180px;
			background-color: rgb(247, 176, 188);
			margin: 10px;
			overflow: hidden;
			display: flex;
		}
		.wrapper div{
			box-sizing: border-box;
			background-color: rgb(255, 40, 154);
			width: 60px;
			height: 60px;
			text-align: center;
			line-height: 60px;
		}
		.wrapper div:nth-of-type(2n){
			background-color: rgb(167, 82, 127);
		}
		.wrapper.one{
			flex-flow: nowrap row;
		}

	</style>
</head>

<body>
	<div class="wrapper one">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
	</div>
</body>
Copy the code

4. justify-content

Justify -content Specifies the alignment of the main axis. The value can be: Flex-start, flex-end, center, space-between, space-around indicate the starting point of the main axis, the end point of the main axis, the center, the space between the elements, and the space around the elements

<head>
	<style type="text/css">
		body>div{
			float: left;
		}
		.wrapper {
			width: 280px;
			height: 150px;
			background-color: rgb(247, 176, 188);
			margin: 10px;
			overflow: hidden;
			display: flex;
		}
		.wrapper div{
			box-sizing: border-box;
			background-color: rgb(255, 40, 154);
			width: 60px;
			height: 60px;
			text-align: center;
			line-height: 60px;
		}
		.wrapper div:nth-of-type(2n){
			background-color: rgb(167, 82, 127);
		}
		.wrapper.one{
			justify-content: flex-start;
		}
		.wrapper.two{
			justify-content: flex-end;
		}
		.wrapper.three{
			justify-content: center;
		}
		.wrapper.four{
			justify-content: space-between;
		}
		.wrapper.five{
			justify-content: space-around;
		}
	</style>
</head>

<body>
	<div class="wrapper one">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
	<div class="wrapper two">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
	<div class="wrapper three">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
	<div class="wrapper four">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
	<div class="wrapper five">
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
</body>
Copy the code

5. align-items

Align-items correspond to context-content, which represents the alignment of the main axis, while align-items represent the alignment of the side axis. The values of align-items are flex-start, flex-end, center, baseline, and stretch(the default value), indicating the starting point alignment, end point alignment, center alignment, baseline alignment, and stretch alignment

<head> <style type="text/css"> body>div{ float: left; } .wrapper { width: 280px; height: 200px; background-color: rgb(247, 176, 188); margin: 10px; overflow: hidden; display: flex; flex-flow: wrap; } .wrapper div{ box-sizing: border-box; background-color: rgb(255, 40, 154); text-align: center; line-height: 60px; } .wrapper div:nth-of-type(2n){ background-color: rgb(167, 82, 127); } .wrapper.one{ align-items: flex-start; } .wrapper.two{ align-items: flex-end; } .wrapper.three{ align-items: center; } .wrapper.four{ align-items: baseline; } .wrapper.five{ align-items: stretch; } </style> </head> <body> <div class="wrapper one"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="wrapper two"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="wrapper three"> <div>1</div> <div>2</div> <div>3</div> < / div > < div class = "wrapper four" > < div > 1 < / div > < div > baseline < / div > < div > 3 < / div > < / div > < div class = "wrapper five" > < div > 1 < / div >  <div>2</div> <div>3</div> </div> </body>Copy the code

6. align-content

Align-content The alignment of subclasses along the lateral axis when they are arranged in multiple lines. Note that this property is invalid for a single line. Line feed or line feed flip is required, which is consistent with justify-content

<head>
	<style type="text/css">
		body>div{
			float: left;
		}
		.wrapper {
			width: 280px;
			height: 200px;
			background-color: rgb(247, 176, 188);
			margin: 10px;
			overflow: hidden;
			display: flex;
			flex-flow: wrap;
		}
		.wrapper div{
			box-sizing: border-box;
			background-color: rgb(255, 40, 154);
			width: 80px;
			text-align: center;
			line-height: 60px;
		}
		.wrapper div:nth-of-type(2n){
			background-color: rgb(167, 82, 127);
		}
		.wrapper.one{
			align-content: flex-start;
		}
		.wrapper.two{
			align-content: flex-end;
		}
		.wrapper.three{
			align-content: center;
		}
		.wrapper.four{
			align-content: space-between;
		}
		.wrapper.five{
			align-content: space-around;
		}
	</style>
</head>

<body>
	<div class="wrapper one">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</div>
	<div class="wrapper two">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</div>
	<div class="wrapper three">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</div>
	<div class="wrapper four">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</div>
	<div class="wrapper five">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</div>
</body>
Copy the code

Then we look at the attributes of sub-items, whose main function is to control the adaptive scaling and allocation of sub-items

1. align-self

Align-self is used to set the alignment of the sub-items themselves on the side axis. In fact, it sets the alignment of some special sub-items separately to cover the align-items of the parent. So the priority is higher than align-items. The values are the same as those of align-items: flex-start, flex-end, Center, baseline, and stretch

<head>
	<style type="text/css">
		body>div{
			float: left;
		}
		.wrapper {
			width: 280px;
			height: 200px;
			background-color: rgb(247, 176, 188);
			margin: 10px;
			overflow: hidden;
			display: flex;
			align-items: flex-start;
		}
		.wrapper div{
			box-sizing: border-box;
			background-color: rgb(255, 40, 154);
			width: 50px;
			text-align: center;			
			line-height: 60px;
		}
		.wrapper div:nth-of-type(2n){
			background-color: rgb(167, 82, 127);
		}
		.wrapper.one div:nth-of-type(1){
			align-self: flex-start;			
		}
		.wrapper.one div:nth-of-type(2){
			align-self: flex-end;
		}
		.wrapper.one div:nth-of-type(3){
			align-self: center;
		}
		.wrapper.one div:nth-of-type(4){
			align-self: baseline;
		}
		.wrapper.one div:nth-of-type(5){
			align-self: stretch;
		}
	</style>
</head>
<body>
	<div class="wrapper one">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</div>
</body>
Copy the code

2. order:n

Used to adjust the order among all subclasses in a particular subclass, n is an integer, the smaller the value, the higher the order, the default value is 0, can be negative

Put the last one first in the example above

.wrapper.one div:nth-of-type(5){
	align-self: stretch;
	order:-1;
}
Copy the code

We know that Flex has the property of adaptive scaling, that is, scaling the remaining space of a container, and the following properties relate to this.

3. flex-grow

Flex-grow indicates the scale of expansion of the child item. By default, 0 does not expand. Note: there must be distributable residual space in a row. If there are more than one subitem, it will be expanded in behavioral units. That is, my row can only be divided proportionally in the residual space of my row

<head>
	<style type="text/css">
		body > div{
			float: left;
		}
		.wrapper {
			width: 280px;
			height: 200px;
			background-color: rgb(247, 176, 188);
			margin: 10px;
			overflow: hidden;
			display: flex;
			flex-flow: wrap;
		}
		.wrapper div{
			box-sizing: border-box;
			background-color: rgb(255, 40, 154);
			width: 50px;
			text-align: center;			
			line-height: 60px;
		}
		.wrapper div:nth-of-type(2n){
			background-color: rgb(167, 82, 127);
		}
		.wrapper.one div:nth-of-type(3){
			flex-grow: 1;			
		}
		.wrapper.one div:nth-of-type(7){
			flex-grow: 1;
		}
	</style>
</head>
<body>
	<div class="wrapper one">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
	</div>
</body>
Copy the code

3. flex-shrink

Flex-shrink is used to define the size of a subitem to shrink. The default value is 1, indicating equal size reduction

<head>
	<style type="text/css">
		body > div{
			float: left;
		}
		.wrapper {
			width: 280px;
			height: 200px;
			background-color: rgb(247, 176, 188);
			margin: 10px;
			overflow: hidden;
			display: flex;
		}
		.wrapper div{
			box-sizing: border-box;
			background-color: rgb(255, 40, 154);
			width: 50px;
			text-align: center;			
			line-height: 60px;
		}
		.wrapper div:nth-of-type(2n){
			background-color: rgb(167, 82, 127);
		}
		.wrapper.one div:nth-of-type(3){
			flex-shrink: 3;		
		}
	</style>
</head>
<body>
	<div class="wrapper one">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
	</div>
</body>
Copy the code

5. flex-basis

Define the reference size (initial size) of the subitem on the spindle

Default value: auto, that is, the original size of the project. If set, it takes precedence over the original size of the project

6 flex

Flex is short for flex-grow, flex-shrink, and flex-basis. Multiple values are separated by Spaces and arranged in a given order (grow, shrink, basis)

That’s all the Flex layout properties and usage!

Figure out the Flex CSS 3 layout | August more challenges

Related Posts

Why did I recommend Prettier to unify code style

2018 Toutiao Spring recruitment front-end intern interview topic summary

The wrapper request function myAxios — the H5 Vue+Vant scaffolding project