Detailed explanation of display:flex||inline-flex property in CSS-CSS Tutorial-php.cn

Detailed explanation of display:flex||inline-flex property in CSS

巴扎黑

Release： 2018-05-16 09:12:12

Original

16380 people have browsed it

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>

Copy after login

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>

Copy after login

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!