【前言】
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
下面来讲解下display的flex和inline-flex属性区别
【概论】
flex： 将对象作为弹性伸缩盒显示
inline-flex：将对象作为内联块级弹性伸缩盒显示
【原理】
赋予父容器更改子元素宽高(或顺序)的能力，来更好的填充可用的空间(主要使其适应各种显示设备和屏幕尺寸)。一个使用Flexbox布局的父容器会伸展每个子元素来填充可用的空间，或者压缩它们来阻止超出父容器。
最重要的是，Flexbox布局在方向上是不可预知的，这一点和常归布局不同(常规布局中块是基于竖直方向排列的，而内联是基于水平方向)。这些常规布局在页面中显示都没问题，但它们缺乏灵活性，难以支撑大型复杂应用的需求，特别是响应方向、大小、伸展、收缩等这些变化。
【适用场景】
Flexbox最适合用在组件和小规模的布局中，如果是更复杂的布局，Grid布局会比较好一些。
由于Flexbox是一个完整的模块，它不单单是一个属性，而是包含了一整套新的属性集，所以这里面涉及到了很多新东西。这些属性中一些是用来设置父容器的，而另外一些是设置子元素的。
【主体】
由一张图简单理解下
使用flex时父元素是block元素，而声明了inline-flex的父元素变成了inline元素
（2）display:flex,换成display:inline-flex，测试结果是，它会根据子元素所有的div大小自适应宽度和高度
display:flex的代码：
<style type="text/css">
*{margin: 0;padding: 0}
.main{
width: 200px;
background-color: #00bcd4;
display: flex;
}
.main div{
width: 50px;
height: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>1</div>
<div>2</div>
<div>1</div>
<div>2</div>
</div>
</body>
display:inline-flex的代码：
想看到效果，将上面的display:flex,换成display:inline-flex,并且将width:200px删除。测试结果是，它会根据子元素所有的div大小自适应宽度和高度。
.main{
width: auto;
background-color: #00bcd4;
display: inline-flex;
}
.
相关推荐
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
在CSS布局中，`flex`和`inline-flex`都是弹性布局（Flexbox）的一部分，它们主要的区别在于如何处理容器的定位和布局。本篇文章将详细解释这两种布局模式，并通过实例来展示它们之间的差异。 首先，`flex`是将一个...
本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别，帮助你更好地理解它们在实际开发中的应用。 首先，我们来看`display:inline`。这种模式使得元素...
在网页布局设计中，`display:inline-block` 是一个非常常用且强大的CSS属性，它允许元素在保持块级元素特性的同时，像内联元素一样并排显示。然而，在不同浏览器之间，尤其是在Firefox（FF）上，可能会遇到一些显示...
Flex布局，全称为“Flexible Box”，也常被称为 Flexbox，是一种在CSS3中引入的布局模式，用于处理复杂的网页布局问题。它旨在提供一种更加灵活、动态...在学习和使用Flex布局时，理解这些基本概念和属性是至关重要的。
`flex-direction`与`display`属性结合使用，可以创建两种基本的Flex布局类型：`flex`和`inline-flex`。 1. `display: flex;`：将元素设置为块级Flex容器，其内的所有子元素变为Flex项目。这种布局会替换掉传统的...
微信小程序开发中的Flex布局是一种灵活的布局方式，其核心是通过设置容器的display属性为flex或inline-flex来启用。Flex布局允许容器内的元素能够以灵活的方式进行排列，适应不同屏幕尺寸和分辨率。在微信小程序中，...
开启 Flex 弹性盒子布局可以通过将元素的 display 属性设置为 flex 或 inline-flex。例如： ``` .box { display: flex; } ``` 或 ``` .box { display: inline-flex; } ``` Webkit 内核的浏览器需要加上 -webkit ...
要使用Flex布局，可以为元素的display属性设置为flex或inline-flex。如果设置为flex，则flex容器以块级（block-level）形式存在；而设置为inline-flex时，flex容器则以内联级（inline-level）形式存在。 在Flex布局...
最近做移动端页面时，经常会用到inline-block元素来布局，但无可避免都会遇到一个问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。对于inline-block元素及去掉间隙的方法，...
为了简化代码，我们可以使用`flex`属性一次性设置`flex-grow`、`flex-shrink`和`flex-basis`。格式为`flex: <flex-grow> <flex-shrink> <flex-basis>;`。如果不提供所有值，浏览器会使用默认值，如`flex: 1;`等同于`...
Flex布局适用于所有display属性为flex或inline-flex的容器。当一个容器被设置为flex布局后，它的子元素（flex项目）的布局将受Flex模型控制。Flex模型包括两根轴：主轴（main axis）和交叉轴（cross axis）。主轴是...
}行内元素使用Flex布局.box{display: inline-flex;}在webkit内核的浏览器上必须加上webkit前缀.box{display: flex;display: -webkit-flex;}注意：使用Flex布局之后，里面的float、clear、vertical-align属性将失效。...
在CSS布局中，`display: inline-block` 是一个常用的属性，它允许元素以行内元素的方式排列，同时具有块级元素的部分特性，如指定宽度和高度。然而，使用`display: inline-block` 时，元素之间往往会出现一些...
通过深入学习和实践这些Flex布局的概念和属性，开发者能够创建出适应性强、布局灵活的网页和应用程序，提升用户体验。在实际项目中，我们可以结合CSS预处理器（如Sass或Less）和CSS变量，进一步提高代码的可维护性和...
- `display: inline-flex`：创建一个行内Flex容器，元素与其他行内元素在同一行。 - `display: flex`：创建一个块级Flex容器，元素独占一行，类似于`div`元素。 2. Flex布局模型 Flex布局模型由主轴（main axis...
在Flex布局中，我们可以将任何容器指定为flex容器（flex container），通过设置display属性为flex或inline-flex。其中，flex表示块级flex容器，而inline-flex则表示内联级flex容器。对于Webkit内核的浏览器，通常...
一个设置了`display: flex`或`display: inline-flex`的元素成为Flex容器，其内部的直接子元素则成为Flex项目。Flex布局的工作原理就是调整这些项目的大小和位置。 1. `flex-direction`: 这个属性定义了Flex项目在...
- Flex容器：任何具有`display: flex`或`display: inline-flex`样式的元素都成为Flex容器，其内部的子元素称为Flex项目。 - Flex布局允许容器在主轴（默认为水平方向）和交叉轴（垂直方向）上对项目进行布局。 2....