Full understanding of Flex usage _flex

One, you can use Flex to layout a div inside another div horizontally vertically centered

such as: HTML code:

<div class= "Container" >
	<div class= "box" >

	</div>
	</div>

CSS code:

. container{
	width:600px;
	height:400px;
	BORDER:1PX solid blue;
	Display:flex;
	Justify-content:center;
	Align-items:center
	}
	. box{
	width:200px;
	height:100px;
	BORDER:1PX Red Solid;

PS: This can be horizontally vertically centered slightly

Second, the properties of Flex

<div class= "Items" >
	<div class= "item" >1</div>
	<div class= "Item" >23</div>
	<div class= "item" >4</div>
	</div>

There are six properties that can be written on items:

flex-direction
Flex-wrap
Flex-flow
justify-content
Align-items
align-content

There are 6 that can be written on the item:

order//This is the item alone, and if you want the item to be reversed, give this attribute to that item.
Flex-grow
Flex-shrink
flex-basis
Flex
align-self

The above is a small series for you to bring a comprehensive understanding of the use of flex all content, I hope that we support cloud Habitat Community ~