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

Docker image compression and optimization operations

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

Docker image compression and optimization operations

Steps for using the non-installed version of MySQL and solutions for forgetting the password

Solve the Docker x509 insecure registry problem

MySQL sharding details

20 Signposts on the Road to Becoming an Excellent UI (User Interface) Designer

Understanding render in Vue scaffolding

A brief analysis of how to change the root password in Linux suse11 if you forget it

SQL implementation of LeetCode (182. Duplicate mailboxes)

Docker-compose installation yml file configuration method

Vue Element front-end application development preparation for the development environment

Recommend

A brief discussion on Yahoo's 35 rules for front-end optimization

A brief introduction to MySQL InnoDB ReplicaSet

Example code for implementing a hollow mask layer with CSS

The button has a gray border that is ugly. How to remove it?

WeChat applet uses the video player video component

Create a new user in Linux and grant permissions to the specified directory

jQuery implements Table paging effect

Mysql 5.7.18 Using MySQL proxies_priv to implement similar user group management

MySQL master-slave replication principle and points to note

7 ways to vertically center elements with CSS

How to configure mysql on ubuntu server and implement remote connection

Vue encapsulates the public function method of exporting Excel data

Detailed explanation of Vue3's responsive principle

CenterOS7 installation and configuration environment jdk1.8 tutorial

Solve the problem of the container showing Exited (0) after docker run