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:
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! |
>>: An article teaches you how to use Vue's watch listener
Recommend
Tutorial for installing MySQL 8.0.18 under Windows (Community Edition)
This article briefly introduces how to install My...
Explore JavaScript prototype data sharing and method sharing implementation
Data Sharing What kind of data needs to be writte...
Comparative Analysis of UI Applications of Image Social Networking Sites (Figure)
In our life, work and study, social networks have ...
Introduction and usage examples of ref and $refs in Vue
Preface In JavaScript, you need to use document.q...
Two ways to understand CSS priority
Method 1: Adding values Let's go to MDN to se...
Use of Linux telnet command
1. Introduction The telnet command is used to log...
Detailed explanation of mysql MGR single-master and multi-master mode switching knowledge points
Main library execution CREATE DATABASE test CHARA...
In-depth analysis of the Identifier Case Sensitivity problem in MySQL
In MySQL, you may encounter the problem of case s...
Vue+el-table realizes merging cells
This article example shares the specific code of ...
mysql three tables connected to create a view
Three tables are connected. Field a of table A co...
HTML exceeds the text line interception implementation principle and code
The HTML code for intercepting text beyond multipl...
Solution to the problem of not being able to obtain the hostname of the host in the docker container
The test is passed in the nodejs environment. The...
A brief analysis of Linux network programming functions
Table of contents 1. Create a socket 2. Bind sock...
Detailed explanation of Vue form binding and components
Table of contents 1. What is two-way data binding...
jQuery realizes the sliding effect of drop-down menu
When we make a web page, sometimes we want to hav...