Home >Web Front-end >CSS Tutorial >Detailed explanation of display:flex||inline-flex property in CSS
Detailed explanation of display:flex||inline-flex property in CSS
- 巴扎黑Original
- 2018-05-16 09:12:1216398browse
This article mainly introduces you to the display:flex and display:inline-flex properties in CSS. The article introduces the use effects of display:flex and display:inline-flex through two pieces of example code. Interested friends can refer to it, let’s take a look below.
Introduction
Flex is the abbreviation of Flexible Box, which means "elastic layout" and is used to provide maximum flexibility for box-shaped models . Any container can be designated as a Flex layout.
flex: Display the object as a flexible box
inline-flex: Display the object as an inline block-level flexible box
flex sample code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
width:200px;
background-color: red;
display: flex;/*父p设置该属性*/
}
.main>p{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*这是css3属性，如果不懂，请继续往下阅读*/
/*float:left;这个属性就不需要了，会自动浮动*/
}
</style>
</head>
<body>
<p class="main">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</p>
</body>
</html>The rendering is as follows:
display:inline-flex sample code
If you want to see the effect, replace the above display:flex with display:inline-flex, And delete width:200px. Before testing, some people may think that .main will occupy the entire row. However, the test result is that it will adapt the width and height according to the p size of all sub-elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
background-color: red;
display: inline-flex;/*父p设置该属性*/
}
.main>p{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*这是css3属性，如果不懂，请继续往下阅读*/
/*float:left;这个属性就不需要了，会自动浮动*/
}
</style>
</head>
<body>
<p class="main">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</p>
</body>
</html>Rendering as follows:
The above is the detailed content of Detailed explanation of display:flex||inline-flex property in CSS. For more information, please follow other related articles on the PHP Chinese website!