Detailed explanation of the use of CSS Flex

1. You can use flex to lay out a p and center it horizontally and vertically inside another p

For example: html code:

<p class="container">
	<p class="box">

	</p>
	</p>

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 way you can center it horizontally and vertically

2. Attributes of flex

<p class="items">
	<p class="item">1</p>
	<p class="item">23</p>
	<p class="item">4</p>
	</p>

There are six attributes that can be written on items:

•flex-direction
•flex-wrap
•flex-flow
•justify-content
•align-items
•align-content

There are 6 items that can be written on items:

•order//This is the item given separately. If you want to change the order of that item, give this attribute to that item
•flex-grow
•flex-shrink
•flex-basis
•flex
•align-self

The above is the detailed content of Detailed explanation of the use of CSS Flex. For more information, please follow other related articles on the PHP Chinese website!