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
Detailed Example of MySQL curdate() Function
MySQL CURDATE Function Introduction If used in a ...
Solution to the problem that Java cannot connect to MySQL 8.0
This article shares a collection of Java problems...
Use CSS to implement special logos or graphics
1. Introduction Since pictures take up a lot of s...
JavaScript timer to achieve limited time flash sale function
This article shares the specific code of JavaScri...
Nodejs uses readline to prompt for content input example code
Table of contents Preface 1. bat executes js 2. T...
How to install and use Ubuntu Docker
Table of contents 1. Automatic installation using...
Implement MaterialUI button click animation based on CSS and encapsulate it into a React component
Preface As a heavy user of front-end frameworks, ...
Simple implementation of mini-vue rendering
Table of contents Preface Target first step: Step...
The browser caches the relevant http headers to minimize the number of http requests
I recently read Yahoo's 34 Golden Rules and le...
Basic tutorial on using explain statement in MySQL
Table of contents 1. Overview 1. Explain statemen...
A complete list of frequently asked JavaScript questions for front-end interviews
Table of contents 1. Handwritten instanceof 2. Im...
Detailed explanation of two methods to solve a bug in the justify-content: space-between alignment of flex layout
When setting display:flex, justify-content: space...
Detailed explanation of XML syntax
1. Documentation Rules 1. Case sensitive. 2. The a...
XHTML introductory tutorial: Application of table tags
<br />Table is an awkward tag in XHTML, so y...
Vue improves page response speed through lazy loading
Table of contents Overview What is lazy loading? ...