Detailed explanation of the difference between flex and inline-flex in CSS

inline-flex is the same as inline-block. It is a display:flex container for internal elements and an inline block for external elements.

Description of the difference between the two:

flex: Display the object as an elastic box
inline-flex: Displays the object as an inline block-level flexible box

In one sentence, when the Flex Box container does not set a width size limit, when display is specified as flex, the width of the FlexBox will fill the parent container, and when display is specified as inline-flex, the width of the FlexBox will wrap the child Item, as shown in the following figure:

The corresponding code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>

    /*Flex container*/
    .flex__container {
      display: inline-flex;
      background-color: gray;
    }

    /*Flex sub-item */
    .flex__item {
      width: 50px;
      height: 50px;

      background-color: aqua;
      border: 1px solid black;
    }

  </style>
</head>
<body>

<!--Flex container-->
<div class="flex__container">

  <!--Sub-Item in Flex container-->
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
</div>

</body>
</html>

This concludes this article on the differences between flex and inline-flex in CSS. For more information about CSS flex and inline-flex, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Use of MySQL trigger

>>: An article teaches you how to use Vue's watch listener

Let you understand how HTML and resources are loaded

Detailed explanation of the difference between flex and inline-flex in CSS

Let you understand how HTML and resources are loaded

Multiple solutions for cross-domain reasons in web development

Let's learn about JavaScript object-oriented

How to modify Ubuntu's source list (source list) detailed explanation

MySQL derived table (Derived Table) simple usage example analysis

Detailed explanation of InnoDB storage files in MySQL

5 super useful open source Docker tools highly recommended

How to set up remote access to a server by specifying an IP address in Windows

Discussion on the problem of garbled characters in iframe page parameters

Implementing the preview function of multiple image uploads based on HTML

Recommend

ElementUI component el-dropdown (pitfall)

Tutorial on configuring SSH and Xshell to connect to the server in Linux (with pictures)

How to connect to docker server using ssh

js regular expression lookahead and lookbehind and non-capturing grouping

Detailed steps to modify MySQL stored procedures

Web front-end performance optimization

Detailed explanation of obtaining, assigning, and registering radio values in HTML

Axios project with 77.9K GitHub repository: What are the things worth learning?

XHTML tutorial, a brief introduction to the basics of XHTML

MySQL 8.0.12 Simple Installation Tutorial

How to install MySQL server community version MySQL 5.7.22 winx64 in win10

Solution to the problem that the border style of the <td></td> tag cannot be displayed in the browser

Disable autocomplete in html so it doesn't show history

Graphic tutorial on installing CentOS7 on VMware 15.5

jQuery implements employee management registration page